I am trying to include a bootstrap grid inside another grid and make sure it is still responsive but on larger screens the child grid doesnt collapse.
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<!-- child grid -->
<div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-md-6">column content</div>
</div>
</div>
</div>
</div>
bootsplay link: http://www.bootply.com/PCMV1BF4YF
the child grid should collapse in larger screens because the width of the parent class is already small. Is it possible to get around this issue?
Inner col-*-* should also be contained in a row. Read the Bootstrap docs on nesting
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-lg-6">Second column content</div>
</div>
</div>
</div>
</div>
Make the inner grid col-lg-* if you want it to stack/collapse before the outer grid does. The breakpoint (when the columns stack) depends on the viewport width, not the width of the parent container.
Also, instead of overriding the Bootstrap container, use a custom class.
http://www.bootply.com/aoUZozmcsc
Related
I'm switching to bootstrap4 today. I enabled flexbox in _variables.scss yet I'm confused about what exactly is flexbox capabilities of bootstrap4. For example
How can I make flex-direction:column?
Is it possible to have a column with fluid width? flex-grow?
I have this markup to build a full height sidebar layout
<div class="flex-col">
<div class="flex-row" id="topnav">
<div class="flex"> <!-- this will grow -->
Brand
</div>
<div> left navbar</div>
</div>
<div class=" flex flex-row"> <!--flex expand to fill full height -->
<div class="sidebar">Sidebar</div>
<div class="flex">Content</div> <!--take rest of row space-->
</div>
</div>
How can I achieve this with bootstrap flexbox?
Read the docs at: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
You just need to enable flexbox, and the row, col-* use flexbox. BS3 uses flex-wrap and flex-direction:row, instead of flex-direction:column The new auto-layout columns use flex-grow to consume the remaining space in a row.
<div class="row">
<div class="col-xs-4">
4
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs">
grow
</div>
</div>
Demo: http://www.codeply.com/go/rZNj0SSRmi
Update
In Bootstrap 4 alpha 6, flexbox is now the default so it no longer needs to be enabled. There are also new flexbox utilities for various properties like flex-column, justify-content-, align-items- etc.. The auto-layout columns can still be used to "grow` width or height.
<div class="container-fluid">
<div class="row">
<div class="col-3 sidebar">Sidebar</div>
<div class="col">Content</div>
</div>
</div>
Bootstrap 4 A6 example fluid layout
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
Because of inherited html parts when using template engines such as twig (PHP) or jinja2 (python), I may need to nest rows like below:
<div class="container">
<div class="row">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
<div class="row">
...
</div>
</div>
Then should I wrap inner rows in column div like below:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
</div>
<div class="row">
...
</div>
</div>
Or should they be wrappered in container again?
You shouldn't wrap the nested rows in .container elements, but you should nest them in columns. Bootstrap's row class has negative left and right margins that are negated by the col-X classes' positive left and right margins. If you nest two row classes without intermediate col-X classes, you get double the negative margins.
This example demonstrates the double negative margins:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
<div class="row">
<div class="col-xs-12" style="background: lime;">
<div class="row">
Here's my text!
</div>
</div>
</div>
</div>
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
<div class="row">
<div class="row" style="background: tomato;">
Where's my text?
</div>
</div>
</div>
For further reading, The Subtle Magic Behind Why the Bootstrap 3 Grid Works explains the column system in great and interesting detai.
You shouldn't wrap them in another container - containers are designed for a typical one-page layout. Unless it would look good / work well with your layout, you may want to look into container-fluid if you really want to do this.
tl;dr don't wrap in another container.
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->
I need two divs to sit side by side, and inside those divs will be divs that have bootstrap 3 classes. The problem is that when I restrict the left div, for example, to 50% by using col-xs-6, the col-xs-... classes on the child elements then only respond to their parent's width.
For clarity:
The purple divs' widths are based on a percentage of their parent, whereas I'd like them to be the same width as though they were a direct child of container whilst being able to keep them separate (and wrap them) from the other adjacent div (each div labelled col-xs-6 will be rendered from entirely different server-side controls).
NOTE: Ignore the fact I'm styling these for an XS display for now, this is only temporary while I work out the styles then I'll amend them accordingly.
For the three purple divs you would use col-xs-4
http://getbootstrap.com/css/#grid-nesting
The sum of the inner divs should add up to 12
You should add another row internally to create a new instance of your 12 columns. You might want to have a look at what Bootstrap calls Nesting Columns
<div class="container">
<div class="row">
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
</div>
</div>
try this JSFiddle