I have the following Bootstrap code:
<div>
<div class="col-md-5"></div>
<div class="col-md-7"></div>
</div>
How to display these two blocks in full width in small displays? Now it displayed under each other.
Now
1
2
Required
1 2
Asked
Active
Viewed 1,688 times
1
Carol Skelly
- 351,302
- 90
- 710
- 624
Daniel
- 1,695
- 6
- 23
- 41
-
`col-xs` instead of `col-md` – Hitmands Aug 10 '17 at 14:56
-
1Try adding col-sm-6 col-xs-6 to both divs – Mena Aug 10 '17 at 14:57
2 Answers
1
In Bootstrap 4, use the xs breakpoint for non stacking columns. This is the default breakpoint so you don't need to use the xs infix in your markup...
<div class="row">
<div class="col-5">1</div>
<div class="col-7">2</div>
</div>
Carol Skelly
- 351,302
- 90
- 710
- 624
0
<div>
<div class="col-md-5 col-sm-5 col-xs-5"></div>
<div class="col-md-7 col-sm-7 col-xs-7"></div>
</div>
You have to declare the size of your col for the @media less than medium
Extra small devices Phones (<768px) - col-xs-*
Small devices Tablets (≥768px) - col-sm-*
Medium devices Desktops (≥992px) - col-md-*
Large devices Desktops (≥1200px) - col-lg-*
Rémy Testa
- 897
- 1
- 11
- 24
-
1if all have the same col-N then no need for bigger ones, just `col-xs` would be enough – sertsedat Aug 10 '17 at 15:02
-
1
-
-
The extra classes are unnecessary, and -xs- isn't used in Bootstrap 4 – Carol Skelly Aug 10 '17 at 16:20