This question already has answers here:
Equal width flex items even after they wrap
(2 answers)
Closed 4 years ago.
I have a basic Bootstrap 4 grid like this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
Columns are correctly stretching and filling out the row width, but on some viewports last column is sent to next row (since it doesn't fit) and somehow stretching too much (and taking full width of row).
How can I prevent this from happening?
Use flex-nowrap on the row...
<div class="container">
<div class="row flex-nowrap">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
https://www.codeply.com/go/w8H4wPL8Vj
Columns inside a row can be styled using bootstrap class col-xs-* so that all your columns fit into the same row instead of going to the next row.
For example,
<div class="container">
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
</div>
You can use the bootstrap breakpoints in col by add extra few classes such as:
col-lg-x where x is a given number in the 12 grid system provided by bootstrap, for example you want all seven column to be on one row on large screens, and it should breakdown to two on each row on mobile screen, you simply add a class col-xs-x where x is a given number from 1 to 12, by giving it col-xs-6 col-md-3 col-lg-1 where xs represents small and extra small devices, md represents medium devices and lg represents large screen devices.
You're simply translating that on xs devices it should be two on a row and on md devices it should be four on a row and lg devices should be that seven column on a row.
Link to understand more http://getbootstrap.com/docs/4.1/layout/grid/
Related
I’m using the latest bootstrap. I have three bootstrap col-sm grid columns. In every column there are bootstrap cards. When I delete all cards in a certain column I want to resize its width to 20px. I have tried to use CSS but the column did not resize. Is there a solution?
One more thing - when the column is resized will the other columns resize correspondingly to fill the empty space?
#import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css";
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col-sm">
This column should resize when it's empty.
</div>
</div>
</div>
This question already has answers here:
Bootstrap columns stacking vertically on mobile device
(2 answers)
Closed 4 years ago.
I have a row and 2 columns on large screen. I am trying to maintain the the 2 columns being aligned next to each other on smaller screen. Say, 768px.
<div class="row">
<div class="col-md-6">
<p> This is just a test</p>
</div>
<div class="col-md-6">
<p> This is just a test</p>
</div>
</div>
If you want them to always be side by side, just use col:
<div class="row">
<div class="col">
<p> This is just a test</p>
</div>
<div class="col">
<p> This is just a test</p>
</div>
</div>
Applying a number to the "col" will require the column to be at least a certain width (depending on the number). By not specifying the number, it will require the columns to be as narrow as they need to be in order to keep them in the same line.
When you say col-md it's for medium devices you can use col-sm for small devices. I suggest you read the documentation on bootstrap.
<div class="row">
<div class="col-sm-6">
<p> This is just a test</p>
</div>
<div class="col-sm-6">
<p> This is just a test</p>
</div>
Unfortunately Bootstrap in Beta version drops push-* and pull-*classes, so I don't have idea how to reorder columns in xs and sm devices from:
[column_1] [column_2] [column_3]
to:
[column_1][column_3]
[column_2]
Any ideas?
There are new Reordering helper classes.
Place the divs in HTML as you want them to appear in mobile:
<div class="container">
<div class="row">
<div class="col-6 col-md-4">
[column_1]
</div>
<div class="col-6 col-md-4 order-md-12">
[column_3]
</div>
<div class="col-6 col-md-4 order-md-1">
[column_2]
</div>
</div>
</div>
[column_1] will stay first and unordered. Reorder [column_3] with .order-md-12(will be last for md-size and up) and [column_2] .order-md-1(will be first for md-size and up)
Check jsfiddle
I've been reading about the push and pull classes in bootstrap, and need to use them, but I'm having some issues. It seems that the default behavior is to rearrange the columns when pushing/pulling.
Example here shows that the on mobile, Column A displays first, but on desktop, Column B displays first. How can I change this so that Column A displays first on both mobile and desktop? I have a logo in what should be the left/top column, and paragraphs in the right/bottom column.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<div class="content">
<h1>Column A</h1>
</div>
</div>
<div class="col-sm-6 col-sm-pull-6">
<div class="content">
<h1>Column B</h1>
</div>
</div>
</div>
</div>
You don't need to use push/pull to make column A appear first. Remove the push/pull and the A will appear before B, and B will wrap below on a smaller screen. The sm md lg will influence WHEN wrapping occurs.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="content">
<h1>Column A</h1>
</div>
</div>
<div class="col-sm-6">
<div class="content">
<h1>Column B</h1>
</div>
</div>
</div>
</div>
why do you need the push and pull? if it was just
div class='col-sm-6 col-xs-12' for each div it would work as you want
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>