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>
Related
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
I can't seem to get this well to align with the center of the page. It seems like it should be easy but I can't figure it out.
You can use offset classes provided by Bootstrap
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="well">
Content
</div>
</div>
</div>
</div>
CODEPEN
Bootstrap is based on a grid system of 12 columns. If you want the above message submission box centered I would place it in a column space of ~6 and have ~3 columns on each side of it like this:
<div class="row">
<div class="col-xs-3">[Empty DIV]</div>
<div class="col-xs-6">[Summision Box]</div>
<div class="col-xs-3">[Empty DIV]</div>
</div>
i have 3 col in medium view in bootstrap shown in above image ie.
i want to achieve this type of view in small view is col-sm-*
my code is
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4">
<div class="col-md-12">B</div>
</div>
IN THIS way i can achieve my target in medium view but cant achieve in small view.how can i achieve the both view as well as in medium and small view as shown in image.
I suggest reading bootstrap css doc also this
But try this:
<div class="row">
<div class="all a col-sm-12 col-md-6">A</div>
<div class="all b col-sm-12 col-md-6">B</div>
<div class="clearfix"></div>
<div class="all c col-sm-12 col-md-6">C</div>
</div>
You can remove the <div class="clearfix"></div> if you don't care about the height mismatch
Here's a working jsfiddle
It's a bit of a stretch, but you could try this:-
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12 visible-sm visible-xs">B</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="col-md-12">B</div>
</div>
Frankly, I can't think of any other solution using just HTML and CSS. Although, if scripts were involved, it would be a different case.
First of all, you shouldn't assign columns without rows, so you should have something like:
<div class="row">
<div class="col-md-8 col-xs-12">A</div>
<div class="col-md-4 pull-right col-xs-12">B</div>
<div class="col-md-8 col-xs-12">C</div>
</div>
So you pull right your B Div (therefore not clearing the next div, and spacing it out). And with col-xs-12 you assure that float won't be present in mobile.
Heres a pen
Now, if you want to remain with your code, I guess Shan answer is the best one.
Well, you could have the height of B and work with margins so the positioning go right, but that isn't considered best practices and could cause some bugs.
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
Bootstrap comes with a 12 columns grid system that must be placed within rows.
My question is, does the column number / row must be 12 (or less), or can I have a layout like the following
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Is there anything I missed ?
Bootstrap allows you to "stack columns", the following is taken from their docs:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<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>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Also from their docs:
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Here, the col-xs values add up to 24, with a clearfix adding the required break
Patrick answer is correct but wanted to go into more detail since I was confused after reading documentation.
Depending on what you're going for having more than 12 columns without doing specific divs for multiple rows can make sense.
12 columns is as much as you can fit on 1 row.
More than 12 columns will cause multiple rows.
By default when you go down to the XS size it acts like col-xs-12. This is where you see it stacking the columns. You can change this behavior if you add a col-xs-n
More detailed jsfiddle Example
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-2">
Navigation
</div>
<div class="col-sm-6 col-md-5">
Editor
</div>
<div class="col-sm-6 col-md-5">
Display
</div>
</div>
</div>
In this example when viewing at medium size you see first column take up 2 columns and then the other two divs split the remaining columns. When you shrink it down to small the first div will then be a whole new row and the remaining divs will split 50/50. Then when you shrink down further to xs it will still do default behavior and stack columns evenly.
It makes sense to use this approach when you want all columns on one row in one resolution but want multiple rows in a different resolution. If you always want two rows then it would make more sense to make separate divs for each row.
Yes and no...
See example fiddle
You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
Instead of
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
You should do, e.g:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.
However.... if you decide to use their (Bootstrap's ) less fies, then you can set the #grid-columns to any value, not just 12.
http://getbootstrap.com/customize/#grid-system
If you are using Bootstrap 4, you create a custom 10 columns grid easily, using their SASS mixins for the grid.
$grid-columns: 10; // This is where you define the number of columns you need/want
#if $enable-grid-classes {
.row-odd-col {
#include make-row();
> {
#if $enable-grid-classes {
#include make-grid-columns();
}
}
}
}
You can then use them like this-
<div class="row-odd-col">
<div class="col-md-5 col-lg-2">1</div>
<div class="col-md-5 col-lg-2">2</div>
<div class="col-md-5 col-lg-2">3</div>
<div class="col-md-5 col-lg-2">4</div>
<div class="col-md-5 col-lg-2">5</div>
</div>
For more details, check here - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
For making a responsive design of a website, first learn bootstrap or css grid layouts. It is also a good approach for making a responsive design. With bootstrap firstly learn grid system and learn the. Max an min widths for different devices and then set no. Of columns for each device and also set
#media (min-widtth: px) and (max-width: px) {}
And set individuals property for each device like phones, tablets, laptop and desktops for perfect fit.
Yes the sum of all columns in a row must be 12 or less. The answer above is correct, using:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
will give you the same effect as your example above. 12 columns is pretty standard across most CSS grid systems.