Make Bootstrap Columns Stop Breaking on Mobile [duplicate] - html

Question

This question already has answers here:
Bootstrap columns stacking vertically on mobile device
(2 answers)
Closed 4 years ago.
I'm trying to get content within a Bootstrap row to scale down rather than break into single columns on mobile. How would I go about this?
Here is an example of what I have so far:
<div class="row justify-content-center">
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
</div>
When I open this up on my phone, each column is displayed as a single line on the page. I'd like all three to be on the same row on mobile.

Answer 1

Bootstrap-4 has removed all the variants of *-xs-* classes.
col-xs- have been dropped in Bootstrap 4 in favor of col-.
So in order to have three equal width columns on all kinds of devices, use col-4 or just col instead of col-xs-4.
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Use p-0 class instead of the inline padding style for the a tags.
https://getbootstrap.com/docs/4.0/utilities/spacing/
Use img-fluid class instead of the inline css style for the img elements to make it responsive.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images
As you may know, mobile devices have less than 414px width. But the sum of the a tags' width is more than 414px. Therefore, you should use a max-width to set their maximum width and use width: 100% or w-100 also.
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
In this case, since the row has exactly 12 columns, it is unnecessary to use justify-content-center. Therefore, you better remove it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4 p-0">
<a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
<h2> title </h2>
<img src="http://via.placeholder.com/100" class="img-fluid">
</a>
</div>
<div class="col-4 p-0">
<a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
<h2> title </h2>
<img src="http://via.placeholder.com/100" class="img-fluid">
</a>
</div>
<div class="col-4 p-0">
<a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
<h2> title </h2>
<img src="http://via.placeholder.com/100" class="img-fluid">
</a>
</div>
</div>
</div>
https://codepen.io/anon/pen/djWZJj

Answer 2

You need to make changes in your col structure. Bootstrap 4 has changed the breakpoints.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
<div class="col-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;">
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;">
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;">
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
</div>

Answer 3

More than likely this has to do with height and width of the images your using. I would suggest just using a max-height and max-width and allow the images to scale to the screen size.
<div class="row justify-content-center">
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="max-width:100px; max-height:100px;">
</a>
</div>