How to display DIV to full width on a page that has a bootstrap class 'col-md-6'?

Issue

I am trying to display divs side by side on a page. However, if there is only one col-xs-12 col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it’s using only 50% even if there is only one col-xs-12 col-md-6. The HTML is coming from MVC, so this HTML is fixed. Is there a way to do this using CSS or JavaScript/jQuery? I was thinking the following javascript(below) will do the trick but it doesn’t.

Here is the my HTML and CSS:

<div class="col-xs-12 col-md-6 textcontent">
   </div>

<div class="col-xs-12 col-md-6 service">
   </div>

<div class="col-xs-12 col-md-6 textcontent">
   </div>

CSS

.col-md-6{
width50%;
}

JavaScript

if ($('.col-xs-12.col-md-6').length == 1) {
    $('.col-xs-12.col-md-6').toggleClass(".col-xs-12.col-md-12")
    }

Solution

Sorry that you’re locked into Bootstrap. This could easily be done with Flexbox. Addressing your specific question and code you posted, there’s just a small error with your class toggle.

if ($('.col-xs-12.col-md-6').length == 1) {
    $('.col-xs-12.col-md-6').toggleClass("col-xs-12 col-md-12");
}

When adding the class names, you don’t want to add the "." and you want the class names separated just like they appear in the HTML. What you were doing was trying to add class=".col-xs-12.col-md-12" instead of class="col-xs-12 col-md-12".

I presume since you’re using Bootstrap, you also won’t need that css definition for .col-md-6 since Bootstrap should already have that defined for you.

Answered By – TommyJ

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.