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 class="col-md-6 textcontent">
</div>
<div class="col-md-6 service">
</div>
<div class="col-md-6 textcontent">
</div>
CSS
.col-md-6{
width50%;
}
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 class="wrap">
<div class="item pink">
Content 1
</div>
<div class="item blue">
Content 2
</div>
<div class="item green">
Content 3
</div>
</section>
<section class="wrap">
<div class="item orange">
Content Solo
</div>
</section>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 class="col-md-12 service"></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 class="col-md-12 service"></div>