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

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")
    }
javascripthtmljquerycsssass


Solution 1:[1]

The Bootstrap grid system is based in a 12 column model. You can just use col-12 to say a column fill all container width.

Try this:

<div class="col-12 textcontent">
   </div>

<div class="col-12 service">
   </div>

<div class="col-12 textcontent">
   </div>

Here the documentation about grid system with bootstrap and breakpoints if you want to apply different column configuration depending of the device screen width.

Solution 2:[2]

What you actually need to do in JavaScript is remove the class "col-md-6".

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

The .col-xs-12 applies to every screen size from xs up, and is overrode by .col-md-6 for screen size md and up. So you just stop the override from happening by removing the class.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jesús Noè Nogueiras
Solution 2 Arleigh Hix

Related Questions