I have a row of cards of a particular size, with a gutter between them. Problem is, the gutter is also applied on both sides of each card that starts and ends the row. I need both the start and end to align with the border of the parent container. I can't find the right words to query this. The closest I got is someone who generates static grids and adds css for first-child. My grid can theoretically be anywhere from 0-99999999 results. I need the first (left-padding) and last (right-padding) in each row to not have the respective paddings.
Example code
<div class="container">
<div class="row">
<div class="col-md-4" ng-repeat="tile in tiles">
<div class="card mb-4 box-shadow">
<img ng-src=" {{ tile.image }} ">
<p>{{ tile.title }}</p>
</div>
</div>
</div>
</div>
Result
| [card] [card] [card] |
| [card] [card] [card] |
Desired Result
|[card] [card] [card]|
|[card] [card] [card]|
Understand how the grid spacing is created. From the Bootstrap docs:
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins..."
Therefore, set container left padding to 0, and then adjust column padding like this...
.col-md-4:nth-child(3n) {
padding-right: 0;
}
#media (max-width:768px) {
.col-md-4 {
padding-right: 0;
}
}
Demo: https://www.codeply.com/go/dvPRr13Wev
<div class="container pl-0">
<div class="row">
<div class="col-md-4" ng-repeat="tile in tiles">
<div class="card mb-4 box-shadow">
<img src="//placehold.it/500x200">
</div>
</div>
...
</div>
</div>
If there are always going to be three cards in a row, you can easily target the first and third card with CSS. However, if you have a container where you can have many cards in the same container with no divider between rows, you have to get a little more tricky with your CSS.
// This selector targets every third card starting with the first card.
.card:nth-child(3n-2) {
margin-left: 0;
}
// This selector targets every third card starting with the third card.
.card:nth-child(3n) {
margin-right: 0;
}
Here's a good resource explaining the :nth-child() pseudo selector in more detail.
Adding a margin: 0 -15px 0 -15px; to container was the solution. This is how popular clothing store Zalando tackles this issue.
Related
In the Flexboxgrid framework I see a margin of -1rem on the .row class. In small viewports this creates a small horizontal scroll of the container.
Since I've seen this negative margin on other frameworks, what is its purpose? Inner columns have a padding of the same qty, reversed.
In the picture, red line is .container, dashed line is .row. Btw the margin is visible only on the right.
Because you're supposed to use them in combination with columns.
Columns generally have a padding to push the contents of them away from the border, in order to make it look nicer. However, when you are nesting columns within columns, the content keeps getting pushed inwards, which is mostly not a desired effect. To keep this from happening the rows have a negative margin, which pulls the columns back. In your case, it looks like you need to add a col-xs-12 around the column groups within the rows . This will prevent the content from being pulled too far.
Take a look here for a nicely explained introduction.
Here's a demonstration of how the .row class works:
.col1 {
background: red;
}
.col2 {
background: green;
}
body {
font-family: sans-serif;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">
<div class="row">
<div class="col-xs-12
col1">
<div class="col-xs-12
col2">
<div class="box">Without a row</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12
col1">
<div class="row">
<div class="col-xs-12
col2">
<div class="box">With a row</div>
</div>
</div>
</div>
</div>
In general row is placed in container. container has padding of 15 and row has margin of -15
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
Consider an unknown number of divs being created dynamically and styled using the bootstrap grid system. In this example, I'm using col-sm-4 so after every third block, we move to a new row. The blocks (divs) can be different heights, which is determined by the content within.
This is where I run into the layout problem. When moving to a new row, I want the fourth block to float to the left. This only happens when the left most div in the row above is also the shortest. I have pictures to illustrate.
Real Life:
The Dream:
The "correct" way to do this would be to wrap every three in a row class I beleive, but I'm not sure how to do this with dynamic content (could probably hack it) or if there's an easy css solution.
HTML:
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 block">
<div class="inner-block"></div>
</div>
<div class="col-sm-4 block">
<div class="inner-block"></div>
</div>
<div class="col-sm-4 block">
<div class="inner-block" style="height:150px"></div>
</div>
<div class="col-sm-4 block">
<div class="inner-block"></div>
</div>
</div>
</div>
CSS:
.block {
padding: 5px;
}
.inner-block {
height: 200px;
background-color: blue;
}
Plunker Example (expand preview to proper size)
If your system is unable to add first/last classes on every nth div, then you can use the nth-child css pseudo selector.
#media (min-width: 768px) {// For medium displays and above
.col-sm-4:nth-child(3n+1) { // We target every 3rd div but offset the count by 1 so that that 1st, 4th 7th etc divs are cleared
clear:both; // Clear the float
}
}
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 currently building a website using Twitter bootstrap (which is amazing!).
I had the layout using:
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
Which works great, I have 2 divs per row basically, and we didn't have to include a counter in our loop to get rid of the margins. It was perfect! But we decided to change our mind about having a fixed layout, so I switched from the .row to .row-fluid. And this is when the problem comes.
I know have something like this:
<div class="row-fluid">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
And the div's with .span6 work well for the first row, but then the margin-left on the .span6 are showing up starting from the second row, therefore the layout is, well, ...not good.
I'm surprised it works amazing for fixed layout but not row-fluid. Is there a work-around for this? I used this on all my site, so having to add counters for all of them would...too much work.
Here is JS Fiddle:
http://jsfiddle.net/denislexic/uAs6k/3/
Any help appreciated, thanks.
Your 2 examples actually have 4 <div class="span6"></div> within a full-width 'row'... adding up to '24', or twice the width meant for a 'row' or 'row-fluid', based on the 12 column grid setup. You're basically creating dropping floats when there are too many to fit within the parent row's width.
(This is also why it seems that 'margin-left:0' is not being applied to your 3rd 'span6', which looks like it's the first 'span6' of a 2nd row.)
In a default/fixed 'row', the nested column's 'span*'s + 'offset*'s will need to be less than or equal to its parent's column 'span*', OR if it's a first-level row, then 12, because the floated 'span*' widths are in pixels.
In a flexible/fluid 'row-fluid', the column widths are set by percentage, so each row and nested row can have nested column 'span*'s and 'offset*'s that add up to 12, each time.
http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
This should solve your issue with the 'row-fluid' setup.
http://jsfiddle.net/csabatino/uAs6k/9/
<h1>NOW this is working.</h1>
<div class="row-fluid">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
<div class="row-fluid">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
<h1>Default fixed 'row' is working, too.</h1>
<div class="row">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
<div class="row">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
If you know the number of span for each row, you can use an expression like this:
.row-fluid [class*="span"]:nth-child(3n+1) {
margin-left: 0;
}
for example: if you have 3 spans for each row, the above expression will removes margin from the first span of each row. And the below one removes the margin-right for the last element on each row:
.row-fluid [class*="span"]:nth-child(3n+3) {
margin-right: 0;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
It only removes margin for the first child so you will need to add another class or change span6 to have margin-left:0;
I solved it by putting an empty div with span12 at the begining, uggly in the code but effective in the gui
If the app can't count elements and divide into rows, removing margin-left and adding padding-right worked just fine for me:
.gal [class*="span"] {margin-left:0; padding-right:20px;}
http://jsfiddle.net/uAs6k/116/
I just did this with jQuery instead:
$(document).ready(function(){
function doFluidFirstSpan() {
var top = $('.thumbnails > li:first-child').position().top;
$('.thumbnails > li').each(function(){
if($(this).position().top > top) {
$(this).addClass("alpha");
top = $(this).position().top;
}
});
}
doFluidFirstSpan();
}
and the css:
.alpha { margin-left: 0 !important; }