Menu
I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
588
Like most grid systems, Bootstrap's grid system is made up of rows and columns, and together they can be used to create any responsive layout you can imagine. A row serves as a wrapper for columns and must be placed inside of a container. A row is created by adding the class row to any element inside of a container.
This is because of the padding which Bootstrap uses for its layout, it is a good practice to nest via row-column-row pattern i.e. nest a row with one column across to nest. See the difference in the snippet below.
A column is created by adding the col inside any element that is inside of a row. By default, columns will be automatically layout as equal width columns. There are many grid options that can be applied to the bootstrap Grid. The first is to force columns to stack at specific breakpoints.
In bootstrap 4 toggle table row snippet i give you three tab with html, css and js, you can easily get code of javascript - How do I collapse a table row in Bootstrap? layout.
Bootstrap has a smart (but delicate) gutters system providing "natural" (margins + paddings) for content on all devices 1.
This system is based on two simple assumptions:
.rows 2
That's why, if you want to place a .row inside another .row (to further divide one of your cols), you'd have to use this markup:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 offset-md-2">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
</div>
</div>
</div>
The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
<div class="row">
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
</div>
</div>
</div>
See this fiddle for a live example.
1 To get rid of Bootstrap's gutters (in v4), one would need to apply no-gutters class on .row.
2 This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of .rows (such as column breaks). At the other end, other elements extend from .rows (such as .form-rows), thus inheriting the gutters system and being valid column parents.
171
.row should not be the immediate child of another .row
.col* should not be the immediate child of another .col*
From the Bootstrap docs:
"Content should be placed within columns, and only columns may be immediate children of rows."
I don't understand why you think you need a row in a row, and what's wrong with just using your layout w/o the nested row. Do you realize that col-12 is the width of a full row?
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h1>Some title</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2">
</div>
</div>
</div>
http://www.codeply.com/go/jfrWn4QDf1
Bootstrap 4, the same rule applies:
"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them... In a grid layout, content must be placed within columns and only columns may be immediate children of rows" __ Bootstrap 4.1 Docs
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
