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