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!
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/
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>
Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?
See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?
This question already has answers here:
Bootstrap 3 - Use more than 12 columns in a row
(3 answers)
Closed 4 years ago.
sometimes it works perfect, sometimes i have big problems with the following ..
Can i write it like this?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
Or does i have to seperate each "row"?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
in my current project the floating issn't correct so that the last column doesnt have the right margin..
Either you can use smaller units instead of larger ones, i.e., .col-md-3 instead of .col-md-6 or use fluid layout.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
<div class="container-fluid">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Your first example reacts exactly as it should. Any time you have more than 12 cols, the offending cols bump down to the next row (not .row which is different). Because you have 16 cols, the last group of 4 sits on next row.
To fit 16 sections on a single visible row (again, not .row), you will need to nest columns like so:
http://www.bootply.com/2VfLJXjcXt
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test1
</div>
<div class="col-md-3">
Test2
</div>
<div class="col-md-3">
Test3
</div>
<div class="col-md-3">
Test4
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test5
</div>
<div class="col-md-3">
Test6
</div>
<div class="col-md-3">
Test7
</div>
<div class="col-md-3">
Test8
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test9
</div>
<div class="col-md-3">
Test10
</div>
<div class="col-md-3">
Test11
</div>
<div class="col-md-3">
Test12
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test13
</div>
<div class="col-md-3">
Test14
</div>
<div class="col-md-3">
Test15
</div>
<div class="col-md-3">
Test16
</div>
</div>
</div>