This question already has answers here:
Bootstrap 3 fluid grid layout issues?
(7 answers)
Closed 6 years ago.
I have a standard bootstrap-grid. The columns differ in their height sometimes which causes this:
Instead what I need is this:
I know, usually this is achieved by grouping 3 items in a row. But: as the browser resizes, it changes from a 3-column to a 2-column and then 1-column layout. So how can I achieve the same effect without using multiple rows?
Code:
<section class="container margin_60">
<div class="row">
<div class="col-md-4 col-sm-6">
// content
</div>
<div class="col-md-4 col-sm-6">
// content
</div>
....
</div>
</section>
Got it!
The solution is indeed to add a clear:both after every 3rd element, so the next element can break. But as the grid shall be dynamic and switch the amount of columns, it cannot be implemented directly into the html.
Solution: :nth-child
#media (min-width: 992px) {
.my-grid-item:nth-child(3n+4) {
clear: both;
}
}
For the 3-column layout and
#media (max-width: 991px) {
.my-grid-item:nth-child(2n+3) {
clear: both;
}
}
for 2-column and 1-column layout.
After every 3 div add that div:
<div style="clear: both;"></div>
Related
I need to make a multirow column for desktop, and for mobile the layout of the grid will be different. please see the images below.
Desktop Layout
Mobile Layout.
In mobile element B will be first. but for desktop A will be on the right side, spanning two rows. I tried doing this by rearranging the desktop layout using col-md-push-#/col-md-pull-#, but i cant make B and C in the same column/different row and make A span the two rows.
I know i can achieve the desktop layout using nested grids but i cant rearrange the elements using push-pull anymore.
Bootstrap 4—which has support for flexboxes—would be nice but here's one way you could possibly do it without nesting but you'd need to create some custom classes. Here's a demo.
<div class="row">
<div class="pull-sm-right col-sm-6">
<p>B</p>
</div>
<div class="pull-sm-left col-sm-6">
<p>A</p>
</div>
<div class="pull-sm-right col-sm-6">
<p>C</p>
</div>
</div>
And the custom classes you would need are the .pull-*-<location> classes as such:
#media (min-width: 768px) {
.pull-sm-right {
float: right !important;
}
.pull-sm-left {
float: left !important;
}
}
You would need to configure the heights of the divs manually but Bootstrap's float based grid system never really matched the heights of the columns.
This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Twitter Bootstrap 3, vertically center content [duplicate]
(2 answers)
Closed 8 years ago.
I have two bootstrap columns. On small devices, the second column should wrap and be displayed in a new line. On other devices, the two columns should be displayed next to each other. The first column is higher than the second one, but its height differs. If (and only if) the two columns are displayed next to each other, I want to display the second column vertically centered according to the first one. If they are displayed below each other, there should be no extra space.
Please see the following example (run in fullscreen and resize the browser window).
.row {
border: 1px solid;
}
.flatcol {
background-color: #009966;
}
.highcol {
background-color: #0099FF;
height: 75px; /* this will be changed, fixed value only for testing purposes */
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 highcol">a</div>
<div class="col-md-4 flatcol">b</div>
</div>
</div>
I tried to use vertical-align:middle for the second column, but it didn't change anything.
Do you have any idea how to modify the flatcol CSS class so the example works as intended?
You could use a media query to display the columns inline on wider screens only..
#media screen and (min-width: 992px) {
.col-md-4 {
vertical-align: middle;
display: inline-block;
float:none;
}
}
Demo: http://www.bootply.com/FiSIZAvCBC
This question already has answers here:
Anyone familiar with mobile visibility and zurbs foundation
(4 answers)
Closed 8 years ago.
I have a button that has the right class so it aligns to the right when on the desktop view of the page but when the page is in mobile view, I want to disable the right class from it and make it centered. How do I do this in Foundation?
<div class="row">
<div class="large-12 column">
<div class="panel">
<h4>Get in touch!</h4>
<div class="row">
<div class="large-9 column">
<p>We'd love to hear from you!</p>
</div>
<div class="large-3 column">
Contact Us
</div>
</div>
</div>
</div>
</div>
The element I want centered when in the mobile view is the Contact Us button.
I am not sure on the zurb-foundation, but the #media css is one way responsive pages are handled.
This should help.
w3c page on #media
I noticed the code after the post and without the css it is hard to know what needs to be changed but putting the #media at the end of the css is what you need to do.
something like this.
#top{height:auto;border:double #ccc;height:150px;width:60%;margin:10px auto; }
#center_collum{ border:solid px;min-height:650px;width:57.0%;margin:0% auto;padding- left:1em;}
#media screen and (min-width:1600px){
body{font-size:100%; }
#top{width:40% }
}
#media screen and (max-width:1600px){
body{font-size:100%; }
#top{width:50% }
#center_collum{width:56%; }
}
#media screen and (max-width:960px){
body{font-size:60%; }
#top{width:70% }
#center_collum{width:54%; }
}
#media screen and (max-width:440px){
body{font-size:50%; }
#top{width:100% }
#center_collum{width:50%; }
hr{margin-top:1.8em;width:100%}
}
The above is just a example of the way it works from a piece of css I am using.
It works on the screen size of the monitor, what you want is something like this.
#media (device-some_attribute_value)
The link explains how it all works.
If you want to actually change the class it would be done with JavaScript
element.setAttribute("class","new_class")
I'm using a responsive fluid grid system on my site, and in most cases the responsive Bootstrap behaviour is what I want: on small screens, the grid columns become fluid and stack vertically.
However, using grid nesting, inside a nested row this is not always the desired behaviour. There are some rows that are not supposed to be stacked vertically, regardless how small the screen is. This is exactly the behaviour of the whole grid when I completely disable all responsive CSS code, but obviously this is no alternative if the responsive behaviour is required for the outer rows.
The relevant markup is:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">This column should be stacked on small devices.</div>
<div class="span6">
<div class="row-fluid">
<div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
<div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>
</div>
</div>
</div>
See this jsfidde for clarification.
How would one best solve this problem? Is there a way to do it with the native bootstrap functions?
[class*="span"] .span6 { display: inline-block; width: 48.61878453038674%}
example:
http://jsfiddle.net/NfTQ7/1/
What I have done to solve issues like this is the following:
<div class="row-fluid">
<div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
<div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>
#media only screen and (max-width: 480px) {
#remove-mobile {
display:none;
}
}
That way, you get rid of that whole mess on smaller devices, and you can add code specifically targeted towards mobile sizes by simply doing the opposite:
<div class="row-fluid">
<div id="show-mobile" class="span6">Your Beautiful Code For Mobile Only</div>
</div>
#media only screen and (min-width: 481px) {
#show-mobile {
display:none;
}
}
#media only screen and (max-width: 480px) {
#show-mobile {
display:block;
}
#remove-mobile {
display:none;
}
}
It's not the simplest of solutions but I've found it suits my needs
https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L572
If you dive into the source for bootstraps grid, it's relatively easy to pull out the less code used to generate the span[1-12] system.
So I just pulled out the basics and put them in my own file with a different selector. So now, when I want to use span's that don't wrap I just use .naps[1-12] (Span spelt backwards).
The responsive CSS looks for .span[1-12] selectors so it ignores my .naps elements.
It's not elegant, and it's not particularly scalable. It does work though :-/
Using Twitter's Bootstrap's standard 940px fluid grid responsive grid I'm trying to get multiple .span div's in one .row.
I want to show a max of 3 .span's on each internal line that grows with the page. So as more .span's are added they just get added to the .row.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="span4">1</span>
<div class="span4">2</span>
<div class="span4">3</span>
<div class="span4">4</span> <!-- wrap to a new line-->
<div class="span4">5</span>
</div>
</div>
</div>
The problem I'm facing is that the span4 which wraps to a new line has the inherited left margin. While I can fix this with nth-child() in modern browsers, it obviously still affects IE.
Any ideas how I can achieve this?
I decided to use the nth-child selector to remove the margin on certain .span's. So my final solution looked likes this:
One column of spans for 320px to 979px
Two columns of spans for 980px to 1409px
Three columns of spans for 1409px and up
#media (min-width: 320px) and (max-width:979px) {
/* one column */
.row-fluid .span4 {width:100%}
.row-fluid .span4 {margin-left:0;}
}
#media (min-width: 980px) and (max-width:1409px) {
/* two columns, remove margin off every third span */
.row-fluid .span4 {width:48.717948718%;}
.row-fluid .span4:nth-child(2n+3) {margin-left:0;}
}
#media (min-width: 1410px) {
/* three columns, .span4's natural width. remove margin off every 4th span */
.main .span4:nth-child(3n+4) {margin-left:0;}
}
For IE7 and 8 I set the width of each span to be 48.717948718% (so two per row) in the css - specifically targeting these versions by using html5 bolierplate .oldie html class. I then used Modernizr and a custom test for nthchild found at https://gist.github.com/1333330 and removed the margin for each even span, if the browser does not support the nth-child selector.
if (!Modernizr.nthchildn) {
$('.span4:even').addClass('margless');
}
Your question specifies that you want columns to automatically wrap to the next line, but in Bootstrap's grid system .spans are specifically engineered to work within a .row, that's the grid. You're not using any .rows at all in your code. So my suggestion, if you stay true to the grid, is to have your code look something like this:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div> <!-- wrap to a new line-->
<div class="span4">5</div>
</div>
</div>
</div>
</div>
Here is a jsfiddle that shows the OP's example and another for clarity. http://jsfiddle.net/qJ55V/5/
You have to use .row (not .row-fluid) in order to get the inherited styles applied to each column (span). Yes, it's extra markup, but not using .row will unfortunately cause your columns to jumble up.
Probably not the most elegant solution, but I just define a new css class in my custom stylesheet such as:
.margless{
margin:0 !important;
}
Then I apply it to any element that I don't want to have margins. I ran into the same thing using bootstrap and couldn't find an alternative solution.