Having issue displaying div to full width on a page-CodePudding

I am trying to display divs side by side on a page. However, if there is only one 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-md-6. Is there a way to do this using CSS? Here is the my HTML and CSS:

   <div >
   </div>

   <div >
   </div>

   <div >
   </div>

CSS

.col-md-6{
width50%;
}

CodePudding user response：

Flexbox is the way to go here. Here is an example:

.wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}

.item {
  flex-grow: 1;
  /* For display purposes */
  padding: 1rem;
}

.pink {
  background-color: pink;
}

.blue {
  background-color: lightblue;
}

.green {
  background-color: lightgreen;
}

.orange {
  background-color: coral;
}

<section >
  <div >
    Content 1
  </div>
  <div >
    Content 2
  </div>
  <div >
    Content 3
  </div>
</section>

<section >
  <div >
    Content Solo
  </div>
</section>

https://jsfiddle.net/willihyde/aqrs410u/1/

CodePudding user response：

If you are using the bootstrap, You can use the col-md-12 class to add a full width column. bootstrap grid system is coming as a fraction system and your number will be divide by 12. So if we divide the 6 by 12 the answer is 0.5 and that means 50%. That's why it's adding a 50% width column. So when we add 12 it will divide by 12/12 and the width will be 100%. You can follow the Bootstrap grid system guideline to learn more about the various width ratios and how to make a responsive grid.

<div ></div>

If you are trying to build this by yourself, Define another class with a name and add the width: 100%;

.col-md-12{
   width:100%;
}

Then add that class name to your html class attribute

<div ></div>