Keep bootstrap columns in same row when changing size
Use the col-xs-* Grid classes.
<div class="row">
<div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
<div class="col-xs-10">
<p>Zero Day Protection</p>
</div>
</div>
In a bootstrap grid, your columns are all 100% wide by default. Use the col-<size>-<number> classes to override that. The <size> can be either xs, sm, md, or lg, and refers to the minimum screen width for that class to apply. The <number> is a number from 1 to 12 and refers to the number of columns wide your content should be.
So, maybe you have really wide content, and it should only be displayed side by side on desktop browsers. You could give your content class="col-md-6" and it would display side by side as long as the browser window is at least 992 pixels wide.
But, for you, since your content is really small, you want it always to display side by side, so you should use col-xs-<number> classes.
You could make it so that on mobile, you have one pair per line, but on tablets you have two per line, and on desktops you have 3 per line:
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";<div class="container-fluid"> <div class="row"> <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> <div class="col-xs-9 col-sm-4 col-md-3"> <p>Adaptive Updates</p> </div> <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> <div class="col-xs-9 col-sm-4 col-md-3"> <p>Online Support and Knowledge Base</p> </div> <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> <div class="col-xs-9 col-sm-4 col-md-3"> <p>Direct Support</p> </div> <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> <div class="col-xs-9 col-sm-4 col-md-3"> <p>Enterprise Management Console</p> </div> <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> <div class="col-xs-9 col-sm-4 col-md-3"> <p>Zero Day Protection</p> </div> </div></div>How to keep all bootstrap columns in the same row with meta tag viewport in mobile view?
The way your code is written right now the columns will each automatically collapse to the equivalent of col-xs-12, because your highest specified media breakpoint for anything else is col-sm-*.
You had mentioned the col-xs-* breakpoint not suiting every potential mobile size, resulting in horizontal scrolling. One way to avoid that potential hiccup is to reconsider how you are displaying your <input> and button elements. Bootstrap has a great UI component for this: .input-group
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid"> <div class="row" id="myForm"> <div class="col-xs-12"> <div class="input-group"> <input class="form-control" id="toDoListInput" placeholder="What needs to be done?" formControlName="toDoListInput" type="text"> <div class="input-group-btn"> <button class="btn btn-light" role="button" type="submit" onclick="appendToList()">Add</button> </div> </div> </div> </div></div>How can I make Bootstrap columns all the same height?
LATEST SOLUTION (2022)
Solution 4 using Bootstrap 4 or 5
Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.
Demo
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
Solution 1 using negative margins (doesn't break responsiveness)
Demo
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Solution 2 using table
Demo
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.
Demo
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
css bootstrap make all cols in row same height
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid"> <div class="row">
<div class="col-6"> <div class="card mb-4 box-shadow h-100"> <div class="card-body"> <p>box 1 data here </p> </div> </div> </div>
<div class="col-6"> <div class="card mb-4 box-shadow h-100"> <div class="card-body"> <p>box 1 data here </p> <p>box 2 data here </p> <p>box 2 data here </p> </div> </div> </div>
</div>
</div>Bootstrap Rows/Columns. How to force all 'col' into one row depending on Screen size
Call d-inline bootstrap class and set a max-width on picture div. For example, I have given.col{ max-width: 100px; }
Code below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.col{
max-width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col d-inline p-0"><img class="img-fluid" src="https://dummyimage.com/vga" alt="Sample Image" ></div>
<div class="col d-inline p-0"><img class="img-fluid" src="https://dummyimage.com/vga" alt="Sample Image" ></div>
<div class="col d-inline p-0"><img class="img-fluid" src="https://dummyimage.com/vga" alt="Sample Image" ></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>Bootstrap - I don't want columns to have the same height
Bootstrap 5 (update 2021)
Bootstrap 5 is still flexbox based so columns in a row are equal height. Therefore d-block can still be used to "disable" flexbox and use float-start to float columns.
Bootstrap 4 (original answer)
Yes, you can use d-block on the row, and float-left on the columns to make it work the Bootstrap 3.x way with floated columns instead of flexbox..
<div class="row d-block">
<div class="col-lg-3 float-left">
..
</div>
<div class="col-lg-9 float-left">
..
</div>
</div>
https://codeply.com/go/Ghhq1NbMDG
Related:
Bootstrap 4 Columns float style like Bootstrap 3 is it possible?
Empty vertical space between columns in Bootstrap 4
How to stop bootstrap columns overflowing to next row when adding a margin
You can use Offset classes. Visit https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns.
The row classes should be that:
<div class="row justify-content-center">
The columns classes should be that:
<div class="col-md-3 border">
<div class="col-md-3 border offset-md-1">
<div class="col-md-3 border offset-md-1">
Bootstrap row with columns of different height
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3, Bootstrap 4 and Bootstrap 5...
Bootstrap 5 (update 2021)
Bootstrap columns still use flexbox, but the card-columns previously used to create a Masonry like layout have been removed. For Bootstrap 5 the recommended method is to use the Masonry JS plugin:
Bootstrap 5 Masonry Example
Bootstrap 4 (update 2018)
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 (original answer -- pre flexbox)
The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.
Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first
There are a few ways to fix this.. (updated for 2018)
1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3
There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables
**2 - Make the columns the same height (using flexbox):**
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
**3 - Un-float the columns an use inline-block instead..**
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.
Demo of inline block fix
4 - CSS3 columns approach (Masonry/Pinterest like solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
prevent wrapping/stacking of columns in bootstrap when shrinking the size?
I think you need to replace col-md-8 with col-xs-8 and col-md-4 with col-xs-4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPE html><html>
<head> <title></title> <meta charset="utf-8"> <meta class="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></head><style> #outside-container { border: 2px solid red; height: 500px; white-space: nowrap; } #container1 { border: 2px solid green; height: 300px; } #colmd8 { border: 2px solid yellow; height: 400px; } #row1 { border: 2px solid pink; } #list1 { border: 2px solid red; width: 200px; height: 200px; } #container2 { border: 2px solid navy; height: 300px; } li { display: inline-block; } ul { white-space: nowrap; } #col4 { border: 2px groove darksalmon; }</style>
<body>
<div class="container-fluid" id="outside-container"> <div class="col-xs-8" id="colmd8">colmd8 <div class="container-fluid" id="container1">container1 <div class="row" id="row1">row1 <ul class="col-md-12 list-inline" id="colmd3" style="list-style: none"> <li id="list1"> <a href="#"></a> </li> <li id="list1"> <a href="#"></a> </li> <li id="list1"> <a href="#"></a> </li> <li id="list1"> <a href="#"></a> </li>
</ul> </div> </div>
</div> <div class="col-xs-4" id="col4">colmd4 <div class="container-fluid" id="container2">container2
</div> </div> </div>
</body>
</html>Related Topics
Chrome Developer Tools Style Tab Showing Faded CSS Definition, Why
Float a Div in Top Right Corner Without Overlapping Sibling Header
@Media: If Samsung Galaxy S4 Is 1920X1080
Difference Between Ng-Class and Ng-Style
Applying Comic Sans Ms Font Style
How to Position a Dropdown at Cursor Position Inside a Textarea
Can Visual Studio 2013 Generate CSS Files from .Less Files
Calculating Square-Roots with CSS
Does The Shadow Dom Replace: :Before and: :After
CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally
CSS Animate Text from Left to Right in Div Container with Overflow Hidden
Gulp SASS - How to Properly Name The Output CSS
Lesscss Method with Ie Filter Alpha Opacity CSS
How to Add Space Between Bootstrap Card Elements