Simple question I want to divide a div in to two columns I am using to divs with
http://jsfiddle.net/petran/WnKW3/
display:inline-block
and it works fine , when I add widths with sum of 100% the second column appears
underneath seems that it doesn't feet on the parent window, if the widths sums
up to 99% is working my question is if that should always be the sum of columns ?
That is because of the gap between the two child div elements in HTML code. you need to remove the gap between the two div's to which you are giving display: inline-block. Just remove it. It will work fine.
<div class="container">
<div class="col1">
col1
</div><div class="col2"> <!-- removed whitespace -->
col2
</div>
</div>
Working Fiddle
For more information go through this link
There are many other ways to fix this. which you can find here
The white space between your divs take up space so your total width is greater than 100% thats why it wraps. Remove the space and you'll see
<div class="col1">
col1
</div><div class="col2">
col2
</div>
http://jsfiddle.net/WnKW3/1/
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
Bootstrap rows has a margin (left and right) of -15px.
As far as I know this is mainly by two reasons:
The .container has a padding (left and right) of 15px
The col-* have a gutter of 15px.
So in order to avoid the blank space created by the gutter on the first column (on its left side) and the space created by the gutter on the last column (on its right side) the row has a margin (left and right) of -15px.
I'm just wondering, why not to remove the padding of the container and just set the padding/margin of a row to 0?
It will produce the same effect, the first column will have 15px of distance to the .container, and the same for the last column.
What I'm missing?
I've checked: Negative left and right margin of .row class in Bootstrap and Bootstrap's .row margin-left: -15px - why is it outdented (from the docs) but I don't see any reason to use negative margins instead of 0 padding.
It's because the containers are meant to be used to contain any content, not just the grid rows and columns. Without padding on the container, content is forced up against the edge of the layout and doesn't align with the other content...
<div class="container px-0">
<p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
<div class="row m-0">
<div class="col-sm-4">
grid content
</div>
<div class="col-sm-4">
grid content
</div>
<div class="col-sm-4">
grid content
</div>
</div>
</div>
https://codeply.com/go/23PqWB19ol
You can see several examples of container used for other than grid content the Bootstrap examples
Negative margins also work better for Responsive Design. Many people ask "why not just adjust the padding on the first and last columns?". This demo shows why
Related: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?
Here is your simple and easy answer
Go to your class where you want to give a negative margin and use this method.
Example for margin top
mt-n3
Example for margin bottom
mb-n2
If removing the minus margin from the row than one should practice to remove the column padding becuase row minus margin is to handle the padding of the same amount in the column.
To remove minus margin recommeded way is to use no-gutters class or g-0 class as per the version of bootstrap.
Upto Bootstrap Version 4.6 Use
<div class="row no-gutters">
Bootstrap Version 5.1 Onwards Use
<div class="row g-0">
Bootstrap negative margin on rows is very easy
Go to your Bootstrap class and concat 'n' with the margin number
For Example
mt-2 //should change to mt-n3
This question already has answers here:
Bootstrap row and col explanation
(4 answers)
Closed 1 year ago.
According to Bootstrap's documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)
and
Use rows to create horizontal groups of columns.
Why is this necessary?
A .row can only occupy the maximum width of either .container or .container-fluid
Given that you have to close the .row it seems longer to write:
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Column A</h1>
</div>
<div class="col-md-6">
<h1>Column B</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h1>Column C</h1>
</div>
<div class="col-md-6">
<h1>Column D</h1>
</div>
</div>
</div>
Than this:
<div class="container">
<div class="col-md-6">
<h1>Column A</h1>
</div>
<div class="col-md-6">
<h1>Column B</h1>
</div>
</div>
<div class="container">
<div class="col-md-6">
<h1>Column C</h1>
</div>
<div class="col-md-6">
<h1>Column D</h1>
</div>
</div>
Container
The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change.
Note that there is a 15px margin on each side, canceled by rows.
Rows
Rows should always be in a container.
The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.
Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.
Columns
The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.
For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.
The .row elements have a negative margin on both sides. All the columns have a padding taking care of the spacing, even the first and the last one (which is something we don't want) so the .row pulls them back to fix that. Also, I think it makes more sense to have more rows in a container, instead of columns.
I have a "header" which is class .row and two columns with classes .col-md-2 and .col-md-10. In the first column there is the logo and in the second the page-heading.
I created a fiddle for you: http://www.bootply.com/TXG3QC7TNo
How can I overlap two columns so that the heading is really centered not only in the column? I tried it with positions (header - relative and columns - absolute) but it breaks the responsiveness!
U can do it in one <div>:
<div class="container">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x100" alt="Logo"><h1 class="text-center">Test</h1></div>
</div>
</div>
AND give ur
img{position:absolute;}
so you won't loose ur responsibility
The h1 tag is a block-level element, try adding 'display:inline-block' to it.
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.