In the code below the span #2 appears below span #1, despite the fact that the number of columns is the same as in the parent span (10). This is because of the border on the nested row (class="row well").
Is there an elegant way to apply border to the nested row without pushing the contents down.
I suppose applying top/left/bottom/right borders on the nested spans depending on their location and applying box-sizing: border-box would help, but then there will be problems when reducing the width of the browser and also this would be an ugly solution.
<div class="row">
<div class="span2"> left menu </div>
<div class="span10">
<div class="row well">
<div class="span5" style="background-color: #aca">
#1
</div>
<div class="span5" style="background-color: #aac">
#2
</div>
</div>
</div>
</div>
dont put the well on the row, make it its own container..
<div class="row">
<div class="span2"> left menu </div>
<div class="span10">
<div class="well">
<div class="row-fluid">
<div class="span6" style="background-color: #aca">
#1
</div>
<div class="span6" style="background-color: #aac">
#2
</div>
</div>
</div>
</div>
</div>
I replaced the class="row" with class="row-fluid" because the "row" class uses strict widths, while the "row-fluid" class uses percentages and will keep the "span6" classes side by side even though there's extra padding and borders added to its parent.
Related
If you make the screen smaller (in width) the divs on the bottom (under 'My work') stack up on each other. I was wondering how to fix this?
See jsfiddle: https://jsfiddle.net/sxnmyjtk/
html:
<div class="tiles">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="servatius">
<p>Servatius</p>
</div>
</div>
<div class="col-md-3">
<div class="levy">
<p>Levy Consult</p>
</div>
</div>
<div class="col-md-3">
<div class="skinprove">
<p>Skinprove</p>
</div>
</div>
<div class="col-md-3">
<div class="mumc">
<p>MUMC+</p>
</div>
</div>
</div>
</div>
</div>
see jsfiddle for css
They are stacking on top of each other because you are using position absolute in your CSS. If you remove this they will then stack vertically when the width is reduced.
If you want the divs to remain side by side you can also consider using col-xs-3 instead of col-md-3.
You can add other bootstrap classes or CSS depending on what results you are tying to achieve when width is reduced.
I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
Bootstrap has a smart (but delicate) gutters system providing "natural" (margins + paddings) for content on all devices 1.
This system is based on two simple assumptions:
columns are immediate children of .rows 2
content is placed inside columns
That's why, if you want to place a .row inside another .row (to further divide one of your cols), you'd have to use this markup:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 offset-md-2">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
</div>
</div>
</div>
The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
<div class="row">
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
</div>
</div>
</div>
See this fiddle for a live example.
1 To get rid of Bootstrap's gutters (in v4), one would need to apply no-gutters class on .row.
2 This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of .rows (such as column breaks). At the other end, other elements extend from .rows (such as .form-rows), thus inheriting the gutters system and being valid column parents.
.row should not be the immediate child of another .row
.col* should not be the immediate child of another .col*
From the Bootstrap docs:
"Content should be placed within columns, and only columns may be
immediate children of rows."
I don't understand why you think you need a row in a row, and what's wrong with just using your layout w/o the nested row. Do you realize that col-12 is the width of a full row?
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h1>Some title</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2">
</div>
</div>
</div>
http://www.codeply.com/go/jfrWn4QDf1
Bootstrap 4, the same rule applies:
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows" __ Bootstrap 4.1 Docs
Linked: Columns must be immediate children of rows?
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)