I have the following code:
<div class='carousel'>
<div class='data-ng-repeat='{{ repeat }}'{% endif %}>
<div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat='i in items'>
<div class='valign'>
<p class='body'>
<span> {$ i.statistic $} </span>
<span> {$ i.text $} </span>
</p>
</div>
</div>
</div>
</div>
With the following css:
.vdivide:not(:last-child) {
border-right: 1px solid rgba(196, 187, 159, 0.63);
}
.carousel {
height: 300px;
}
I thus have 4 columns with a bar to separate them.
I would like them to stack up nicely when I do switch to a mobile screen.
Any idea how could I do that using bootstrap ?
You don't need to do anything other than use the correct column class names. Look at the examples provided:
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
So, for 4 columns on desktop (stacked everywhere else) just use .col-md-3 on your repeating div, getting rid of .col-xs-12.col-sm-3.
Note: I really recommend against adding your own presentational CSS classes to your columns. Keep the grid completely separate and add extra markup within to achieve the same thing: you will make life much simpler for yourself going forwards.
Related
I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:
Screenshot
But what I want is
The code to generate the grid looks like this:
<div class="row">
<div class="col-md-6 panel panel-default" v-for="result in results">
<img src="{{ result.art }}" />
<strong>{{ result.title }}</strong>
<br />
from <strong>{{ result.album }}</strong>
<br />
by <strong>{{ result.artist }}</strong>
</div>
</div>
I'm using Vue.js for this template.
So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.
Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.
Thanks for your help! :)
You need to add something every 2 col-md-6 to ensure the left floats clear..
One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..
#media (min-width: 768px) {
.row > .col-md-6:nth-child(2n+1) {
clear: left;
}
}
http://www.codeply.com/go/oAiZNlWgau
There are a few ways to achieve this.
Wrap each row into it's own row
<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>
You can also set a min-height for each item, that way they will always be the same height.
Lastly, you can not use the bootstrap grid system and build your own grid by using display: inline-block; just be sure to set negative margin on each element and v-align to top.
Hope this helps :P
Do nested Bootstrap 3 rows need to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc?
The documentation says col-sm-* but it doesn't appear to be explicit about whether nesting within other col sizes is forbidden.
http://getbootstrap.com/css/#grid-nesting
The col-sm-*you're referring to is just an example. It should really be col-*-* (xs, sm, md, lg).
Have a look just further down where the describe pushing and pulling with .col-md-push-* and .col-md-pull-*. Once again it's just an example, any column can be pushed and pulled.
Furthermore, a nested row doesn't necessarily need to be directly within the parent column. The important thing to remember is that every row is directly followed by a column, but nested rows can be wrapped with any element.
Examples:
<div class="row">
<div class="col-xs-12">OK</div>
</div>
<div class="row">
<div class="foo">
<div class="col-xs-12">NOT OK</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">OK</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="foo">
<div class="row">
<div class="col-xs-6">OK</div>
</div>
</div>
</div>
</div>
You can use all class in the same time. On this base bootstrap decide which one is the best for screen.
You can nasted class inside all of types - it's depend what you need.
In TWBS3 the .col-xx-x classes only set width in terms of percentage, e.g. .col-sm-4 { width: 25% }, .col-md-4 { width: 25% } and .col-md-4 { width: 25% }.
Yes all the same, so you only need to define one.
But then why have all the variants? Two reasons:
It's because you may want to have the columns render different widths at different resolutions, e.g. .col-sm-4 .col-md-3 will render 1/4 width in small screen, but as 1/3 in medium, large and x-large screens.
The column will render down to it's 'mobile first' variant once the screen resolution falls below the chosen width. i.e. .col-sm-4 will render ΒΌ width in small, medium, lg, xl screens, but render full width at xs screens. Similarly, using only .col-md-4 with render 1/4 in md, lg & xl screens, but full width in sm & xs. Therefore, a class set like .col-sm-4 .col-md-4 is redundant.
So, with that knowledge - and in direct answer to your question: No, you only need one declaration, but be mindful of the size you select, as, when in smaller than your choice, the column will render full width (width: 100%)
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
+-------------------------------+ +-------------------------------+
| | | |
| | | |
+-------------------------------+ +-------------------------------+
Generally it is easy with Bootstrap 3.
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-5 pull-right">
</div>
</div>
The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.
I also tried to add padding right and left, but that had not effect, too. What can I do here?
You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:
.dashboard-panel-6 {
width: 45%;
}
Add this to your div elements. This way the width rule of col-md-6 gets overriden.
<div class="row">
<div class="col-md-6 dashboard-panel-6">...</div>
<div class="col-md-6 dashboard-panel-6">...</div>
</div>
You can use another div inside and give padding to that.
<div class="row">
<div class="col-md-6">
<div class="inner-div">
</div>
</div>
<div class="col-md-6 pull-right">
<div class="inner-div">
</div>
</div>
</div>
.inner-div{
padding: 5px;
}
I posted this here already but it is still relevant the original question.
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
This was the end result we were going for
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
this is the markup for the two columns
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
Hope this helps
Here's another possibility:
Live view
Edit view
You will see that it uses 2 col-md-6, each with a nested col-md-11, and you position the nested row in the second div to the right.
The suggestion from Ken has clean HTML which I like. If your left and right panels use elements with widths defined by Bootstrap though (eg wells or form elements) the column padding could cause hassles and break the layout. This nested approach might be easier in this situation.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-11">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
</div>
</div>
Good luck!
I'm new to Bootstrap and loving it so far but have a couple of simple questions to do with the grid - can't seem to find the answers anywhere...
<div class="container">
<div class="row" style="background-color: #ccc;"> <!-- 1. How do I get this background colour to exclude the left 20px gutter? -->
<div class="span5">
Left Col
<div class="row">
<div class="span5">
<input class="span5" type="text"/> <!-- 2. How do I stop this input from shifting right 20px in IE7? -->
</div>
</div>
</div>
<div class="span7">
Right Col
<div class="input-prepend">
<!-- This lines up correctly, even in IE7 - my star hack will break this -->
<span class="add-on">+</span><input type="text" placeholder="Add..." class="span6">
</div>
</div>
</div>
</div>
Having inspected the bootstrap css I can see that .row starts by pulling back the margin-left by 20px, so that each time a .spanX is created, it has a 20px gutter to the left. This makes sense, but how can I apply style to the whole row (e.g. a background colour) and have this apply to all columns within that row (the span5 and span7 in my example) but without including the left hand 20px gutter?
Secondly, what is the best way to set the widths of elements within a column? In my example I have tried to size a textbox to fill the width of the left hand column by placing it in a nested row with span5. This doesn't work in IE7 - instead it moves to the right by 20px and I lose the right hand gutter.
To see this, check out http://jsfiddle.net/jRcJG/ in IE7 vs good browsers.
The closest I've got is to put together an IE hack to shift the inputs back again, but this causes other problems such as squashing up the input-prepend in the right column:
http://jsfiddle.net/JsBpV/
Unfortunately the project I'm working on must support IE7 so I don't have the luxury of ignoring these users.
Thanks for any help!
A simple but not necessarily elegant solution for #2 is to add an IE star hack inside a class:
input.ie-fix-left, textarea.ie-fix-left {
*margin-left: -20px;
}
which requires you to put a class on each input element that is affected by this problem:
<div class="row">
<div class="span6">
<input type="text" class="span6 ie-fix-left"/>
</div>
</div>
Create a div with .span12 and include another level of row/span with your .span5 and span7
jQuery