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

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 >
   </div>

<div >
   </div>

<div >
   </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")
    }

CodePudding user response：

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 instead of .

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.

CodePudding user response：

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 >
   </div>

<div >
   </div>

<div >
   </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.

CodePudding user response：

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.