Is there possible to stack elements on each other (col-12) on small device, but use auto-layout for all bigger screens? An example mentioned below does not work. I do not know how many columns I will render (1-6) so cannot "calculate the class" in advance.
<div class="row">
<div class="col-12 col-md-auto">Column 1</div>
<div class="col-12 col-md-auto">Column 2</div>
<div class="col-12 col-md-auto">Column 3</div>
</div>
Just remove the auto
<div class="row">
<div class="col-12 col-md">Column 1</div>
<div class="col-12 col-md">Column 2</div>
<div class="col-12 col-md">Column 3</div>
</div>
Related
Is it possible to move card from one column to another column?
When the page is reached to mobile view then card 3 should move to 2nd column in middle of card 1 and card 2
How to achieve this?
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class= "card">card 1</card>
<div class="card">card 3</card>
<div class="card">card 2</card>
</div>
<div class="col-md-4">
<div class="card">card 3</card>
</div>
</div>
</div>
Use the responsive display classes.
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class="card">card 1</div>
<div class="card d-md-none">card 3</div>
<div class="card">card 2</div>
</div>
<div class="col-md-4">
<div class="card d-none d-md-block">card 3</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.6/utilities/display/
In bootstrap grid, i am unable to get the desired outcome. I have four divs with classes col-sm-3 and as per rule all 4 should display in one line as it is 12 column layout. But it's not. I have also attached the screenshots
Already tried other breakpoints too like xs and md
<div class="testing container">
<div class="row">
<div class="box1 justify-content-center col-xs-3 col-lg-6">BOX 1</div>
<div class="box2 col-xs-3 col-lg-6">BOX 2</div>
<div class="box3 col-xs-3 col-lg-6">BOX 3</div>
<div class="box4 col-xs-3 col-lg-6">BOX 4</div>
</div>
</div>
In mobile devices all boxes should be in one line
Bootstrap 4 has changed its col-xs class it is now just col- and then the size of the column you want for example:
col-1 col-2 col-3
Note that col-smm col-md and col-lg still work in the way they did in bootstrap 3
Don't use xs in BS4. use sm for anything under 576px.
<div class="testing container">
<div class="row">
<div class="box1 justify-content-center col-3 col-sm-6">BOX 1</div>
<div class="box2 col-3 col-sm-6">BOX 2</div>
<div class="box3 col-3 col-sm-6">BOX 3</div>
<div class="box4 col-3 col-sm-6">BOX 4</div>
</div>
</div>
I'm obviously missing something very obvious here but I want a 10px gutter between the bootstrap columns. Coming from ui-kit which has gutters by default, to turn them off you simple add the class uk-grid-collapse.
What is the bootstrap equivalent for turning gutters on?
http://codepen.io/anon/pen/vKBjBa
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col1">
<div class="div-content">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col2">
<div class="div-content">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col3">
<div class="div-content">col 3</div>
</div>
</div>
Just define the colors to inner div. Here i have remove classes from parents and passed the classes to child div's
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="div-content col1">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="div-content col2">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="div-content col3">col 3</div>
</div>
</div>
Because bootstrap has a default gutter space in col- classes so use them and define background-color to inner div's.
The default gutter space is 15px from each side left and right so you will see the default space of 30px between the div's. If you want to change that space to 10px just write you own css with desired space and overwrite it.
You can do it using bootstrap class container-fluid , Please update your HTML with following :-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="container-fluid col1">
<div class="div-content">col 1</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="container-fluid col2">
<div class="div-content">col 2</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="container-fluid col3">
<div class="div-content">col 3</div>
</div>
</div>
</div>
It may help you.
If you want a custom gutter width of 10px, you can do that by customizing the bootstrap with your value by using http://getbootstrap.com/customize/ or you can make your own custom class to overide it
If you want to completely remove the gutter, Bootstrap 3 introduced row-no-gutters in v3.4.0:
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
I have searched all over but couldn't find any ways to achieve the following grid with bootstrap : http://oi60.tinypic.com/2r404rc.jpg
This post came close, but it's not what i wish for : How can I get a Bootstrap column to span multiple rows?
Any ideas if it's possible to do it with bootstrap ?
Or should i search for a classic css way instead.
Edit : The html must follow this order
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
try this
<div class="row>
<div class="col col-lg-8>
<!-- col 1-->
<div class="row">
<!-- row 1-->
</div>
<div class="row>
<!-- row 2-->
</div>
</div>
<div class="col col-lg-4">
<!-- col 2-->
</div>
</div>
you should use column nesting
here is an example
http://www.bootply.com/HjJxS7jKHM
Or
<div class="row">
<div class="col-md-6 blue">
<div class="row">
<div class="col-md-12 short-div border">Span 6</div>
<div class="col-md-12 short-div border">Span 6</div>
</div>
</div>
<div class="col-md-6 green tall-div border">Span 6</div>
</div>
<div class="row">
<div class="col-md-6 short-div green border">4</div>
<div class="col-md-6 short-div blue border">5</div>
</div>
I want to create a (more or less Pinterest like) grid layout like in the below below. The two columns have different rows, but do appear side to side. How can I do this using the twitter bootstrap grid framework?
If I'm not mistaken the normal row/col behaviour would give me the layout below.
You should be able to achieve the layout by using two columns which themselves have rows:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">5</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>
</div>
<div class="col-xs-12">8</div>
</div>
</div>
http://jsfiddle.net/zz4ug/
Create the illusion of incongruous rows via background color or image:
<div class="container">
<div class="row">
<div class="col-xs-6 red"> </div>
<div class="col-xs-6 orange"> </div>
</div>
<div class="row">
<div class="col-xs-6 red"> </div> <--This will appear to be on row 1
<div class="col-xs-3 blue"> </div>
<div class="col-xs-3 green"> </div>
</div>
</div>
Check out this jsFiddle