I would like to create a grid in Bootstrap 3.3.7 which is nested in another parent grid.
Here's the HTML:
Parent component
<div>
<div class="row">
<div class="col-md-3 border">.col-md-3</div> //
<div class="col-md-9 border">
<nested-app></nested-app> // should have 9 cols
</div>
</div>
</div>
Nested component // Should have 9 cols
<div class="row">
<div class="col-md-1 border">.col-md</div>
<div class="col-md-3 border">.col-md-4</div>
<div class="col-md-4 border">.col-md-4</div>
<div class="col-md-4 border">.col-md-4</div>
</div>
The problem is that the width of col-md-1 inside nested component is not the same as col-md-1 in parent component.
here's an example
So my question how can I make the same width of columns as parent grid in a nested grid?
Columns have percentage based widths, so there always going to consume some percentage of their containing row.
For example, col-*-1 is 8.333333% the width of its parent row.
Therefore, the row>col nested inside the parent col-md-9 has 12 more smaller columns (not 9 more). As a result, the inner col-*-1 is going to be narrower because it's consuming 8.333333% the col-md-9, which is less than 8.333333% of the outer container.
Related
This question already has answers here:
Nested rows with bootstrap grid system?
(2 answers)
bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
(3 answers)
Bootstrap Rows and Columns - Do I need to use row?
(4 answers)
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 3 years ago.
I m trying to use a div with class col-sm-6 and trying to divide it again in 12 grids using col-sm-6 and col-sm-6 classes. However, it does not seem to work. col-sm-6 inside col-sm-6 is taking entire width of the parent and not sticking to 50% width as it should.
This pattern used to work well in Bootstrap 3 but does not seem to work in Bootstrap 4. I have code to prove it works in bootstrap3 but not in 4 below:
Bootstrap 3- It works: https://codepen.io/vishalgulati/pen/axMNRz
Bootstrap 4- It does not work - https://codepen.io/vishalgulati/pen/KYEzxr
Same code is used in both:
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<div class="col-sm-6" style="background-color:red;">25%</div>
<div class="col-sm-6" style="background-color:pink;">25%</div>
</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>
Bootrap 4 use "flex" styles. So you have two way:
1) You need to add
<div class="row">
before your first two divs with class col-sm-6 and close it after.
You can see your modified example: https://codepen.io/anon/pen/ZZPOEz
2) You need to add flex (display: flex;) to you first div on cols-sm-6, that contain two divs.
<div class="col-sm-6" style="display: flex;background-color:yellow;">
You can see your modified example: https://codepen.io/anon/pen/MRxeow
or add class 'row' to it - https://codepen.io/anon/pen/wZOWPO
<div class="col-sm-6 row" style="background-color:yellow;">
col will only works when it is the direct child of row. in your case, if the col is inside another col, it won't work. So you must wrap them with row. And since row has default margin of -15, you must wrap it with container. Check this.
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:red;">25%</div>
<div class="col-sm-6" style="background-color:pink;">25%</div>
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>
<br>
<h6>
This row/deck contains two elements. You can see that even with col-md-4 it spans more than 2/3 of the width.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div> <br><br>
<h6>
This row/deck contains three elements. You can see that each card spaces 1/3 of the width as expected.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div>
</div>
https://jsfiddle.net/9e85Lb0y/
In this example there are two flex-rows each containing a card deck. The first deck has 2 cards and the second deck has 3 cards. All of the cards are identical. Why is it that the top row has wider cards? I would have expected the top row to have the same widths as the bottom row.
Columns aren't meant to be inside card-deck. They're only supposed to be contained in .row. The cards would go inside the columns.
From the Bootstrap docs...
"Rows are wrappers for columns... In a grid layout, content must be
placed within columns and only columns may be immediate children of
rows."
If you're trying to set widths for the cards in card-decks, see:
Bootstrap 4 card-deck with number of columns based on viewport, or
bootstrap 4 card-deck containing cards with different width
TLDR
Use flex-row and col-* to explicitly specify widths. Use card-deck and card to create evenly sized blocks. Avoid mixing the two, they are not designed for use together straight out of the box.
Long Answer
The issue here is most likely caused by the mixture of both the flex-row and card-deck classes. While both offer very similar functionality, there are some key differences which separate how they behave.
The card-deck class simply guarantees that any immediate elements with the card class are all the same width as one another.
<div class="card-deck">
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
</div>
Every <div class="card"></div> will now become a uniform width. They are not guaranteed to fill the whole of their parent container. The card class also applies left and right margins of 15px to keep them separated.
<div class="flex-row">
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
</div>
The flex-row and col-* classes on the other hand allow you to create columns of specific size. Each col-* class simply applies a width to the element, the onus is on you to make sure your content will fit appropriately at each breakpoint. col's SHOULD NOT have any margins applied as CSS width declarations do not account for margins.
I am new to bootstrap 4 and haven't worked on bootstrap 3 much either.
When I assign a class col-(breakpoint)-(span) to div(s), they don't automatically arrange in a single row or adjust according to the width of the window, instead they remain left aligned and stacked on top of one another. So I assign CSS flex property to the parent container and that does the trick.
Now to make these wrap according to the window size I assign classes according to bootstrap 4 grid system, but that does not make the containers wrap to the next row. Instead the combined width of the flex-items exceeds the width of the window, enabling sideways(x-axis) scroll.
What I want is that the first two containers remain in one row and last two wrap to another row on smaller screen widths(phone portrait, <576px).
<div style="display:flex;">
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
</div>
Where am I going wrong?
Use all necesarry grid classes, see the docs https://getbootstrap.com/docs/4.0/layout/grid/
You have to wrap all cols in row and rows in container (.container or .container-fluid)
<div class="container">
<div class="row">
<div class="col-sm-3 col-6">x</div>
<div class="col-sm-3 col-6">y</div>
<div class="col-sm-3 col-6">z</div>
<div class="col-sm-3 col-6">a</div>
</div>
</div>
Try this to remove the style attribute that contais flex and add instead a class="row" and for the child divs replace the classes with this class="col-lg-3 col-md-3 col-6"
I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>
I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).