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/
Related
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I have a row with four containers, each col-md-6. Is there a way to position the third container such that it occupies the vertical space above it? I could make two columns, but the content of containers 2 and three could get large, so i would like the containers to rearrange based on the most efficient layout.
Bootstrap Columns
```
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
It's a really interesting problem. Pity that you did not write an example of the code. Maybe you should consider to rearrange container on two separate columns (like in the code below) but I hope someone can answer this question better than me.
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content1 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content2 item-content">
...
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content3 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
</div>
</div>
I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?
Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>
You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.
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 use Bootstrap for my css layout.
How come the following html code produces different margin-left for the side elements ?
Like the screen shot shows.
Thanks a lot for the help.
<body>
<div class="container-fluid pink"> <!--container-->
<div class="row-fluid">
<div class="span12 grey"> <!--header-->
header<br/><br/><br/><br/>
</div>
<div class="row-fluid"> <!--navs-->
<div class="span2 green">nav 1</div>
<div class="span2 yellow">nav 2</div>
<div class="span2 yellow">nav 3</div>
<div class="span2 green">nav 4</div>
<div class="span2 yellow">nav 5</div>
<div class="span2 green">nav 6</div>
</div>
<div class="row-fluid">
<div class="span3 yellow"> <!--sidebar-->
<div class="span12 cyan">side 1</div>
<div class="span12 blue">side 2</div>
<div class="span12 cyan">side 3</div>
</div>
<div class="span9 blue"> <!--Body-->
body<br/><br/><br/><br/><br/>
</div>
</div>
<div class="row-fluid"> <!--footer-->
<div class="span4 green">foot 1</div>
<div class="span4 grey">foot 2</div>
<div class="span4 green">foot3</div>
</div>
</div>
</div>
</body>
You have nested rows in the side bar. Try this for that section
<div class="row-fluid">
<div class="span3 yellow"> <!--sidebar-->
<div class="row-fluid"> <!-- start nested rows -->
<div class="span12 cyan">side 1</div>
</div>
<div class="row-fluid">
<div class="span12 blue">side 2</div>
</div>
<div class="row-fluid">
<div class="span12 cyan">side 3</div>
</div> <!-- end nested rows -->
</div>
</div>
For full details, see the fluid nested section at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
Good luck!