Is it necessary to add a .row in the .container-fluid block?
On bootstrap website, it say:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
I have been doing like this without .row and it work fine:
<div class="container-fluid container-fixed-lg ">
<div class="panel">
<div class="panel-body">
<table>
......
</table>
</div>
</div>
</div>
If you look at a row class in BootStrap CSS, you'll notice there's -15px of margin on both the left and right. This is to compensate for the 15px of padding a container provides. This is important if you're nesting columns within your row as the columns themselves have 15px of padding (called a "gutter" in many cases).
As BootStrap say:
Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.
In other words, you should use a row if you're nesting columns, if not then there's not an absolutely essential need for them...
Your code is ok, no need to put useless div with class row if you don't use the bootstrap grid system. And obviously you aren't here.
You should check out what .row does. In bootstrap it removes the margin from the left and right side of the div (gutter). With that knowlegde you can make out if you need to use it or not. :)
I used .row many times within the .container fluid block.
Related
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
I need an element to take the entire screen's width.
Thus, I put it under .row like so because .container adds 15 px padding, then .row takes it away to be full width again.
.container-fluid
.row
header
.col-xs-12
"content content content"
But when I inspect the header element, its height is 0.
How do I get it to automatically be the height of the contents of .col-xs-12 without hard-coding the pixel values or using javascript?
So a few things:
First of all, as per Bootstrap's docs, "only columns may be immediate children of rows." If you are going to add a header element, make it a parent element of the .row or the .container, or put it within the .col-xs-12.
All .col-xx-xx divs float left, so they are technically taken out of the page flow, which is why your header element has no height--the browser doesn't see its contents as affecting the flow of the page, so it doesn't believe it has a height. Using Bootstrap, you can add the .clearfix class to fix this, though I suggest making sure that you clean up your Bootstrap layout a bit first.
EDIT:
Also (and I suppose this should go without saying, but since your code is sparse -- and in haml?--, I want to make sure that it's true), if your .col-xs-12 has no content in it yet, you won't have a height because there's no minimum height set on a .col-xx-xx divs.
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-xs-12">
CONTENT HERE
</div>
</div>
</div>
</div>
I hope this helps!
I played with bootstrap a little, then I found this annoying problem about how to centering a span class. After trying offset to do centering some span, I can centering a certain span class like (span8 with offset2, or span6 with offset 3), but the problem is, I want to centering the span7/span9/span10.
Then I trying to use some tricks to centering the span10...
<div class="container"> <!--Or span12 since the width are same-->
<div class="row">
<div class="span1" style="background:black;">Dummy</div>
<div class="span10" style="background:blue;">The Real One</div>
<div class="span1" style="background:black;">Dummy</div>
</div>
</div>
Is there any solution rather than using the code above?
And what should I do if I want to centering the span7, span9 or even span11 without changing the row margin-left value? Because the class row already set the margin-left by 20px, that makes me hard to centering the span.
Centering "even" .spanN? Use .offsetN
<div class="span10 offset1">
Centering "odd" .spanN? Impossible using framework resources. As you decided to use Twitter Bootstrap, you assumed working with a grid. If you center an "odd" column width element, you're breaking the grid, so there are no Bootstrap tools to do that.
There's a theoric (but strange) solution: duplicate your column count. In a 24-column layout, a .span7 becomes a span14, wich you can center with an .offset5.
This is a non-issue in Bootstrap 3, but for Bootstrap 2.x, I've come up with a CSS workaround that creates a 'half' offset that can be used to center (almost) odd numbers of spans. These half spans create a percentage that is half the standard offsetX in the bootstrap.css
/* odd span centering helpers */
.row-fluid .offsetHalf {margin-left:8.5% !important;}
.row-fluid .offsetHalf1 {margin-left:12.9% !important;}
.row-fluid .offsetHalf2 {margin-left:21.6% !important;}
.row-fluid .offsetHalf3 {margin-left:25.6% !important;}
Link to demo
I've captured an illustration of a CSS two-column layout I've set up, while using the following rule for the orange containers:
.embedded_post{
float: left;
width: 46%;
margin-right: 20px;
padding: 10px;
display: inline-block;
}
As can be seen, the second orange container on the right column is preventing the second orange container on the left column from floating up to the top left box.
This happens apparently since float:left automatically grants the element with a block level flow.
How can I get the second box on the left column to be positioned under the first one?
can you wrap your columns in another pair of divs, so that floating in the right column won't affect floating in the left?
<div id='left_column'>
<div class='embedded_post'></div>
<div class='embedded_post'></div>
</div>
<div id='right_column'>
<div class='embedded_post'></div>
<div class='embedded_post'></div>
<div class='embedded_post'></div>
</div>
css:
#left_column, #right_column {
float:left;
}
you've answered it yourself, there are a couple of options:
trick yourself by granting the div elements with an inline level flow, i.e. specifying display: inline (not recommended).
update the markup to be more semantic and alter the layout to conform to the desired result, e.g. replacing the divs with spans (preferred).
The second div on the left has less width than the rest of the divs, this might have something to do with it. Also, the combination with your (desired) structure and the margin-right isn't how I would do it. In fact, the margin-right may, depending on the with of the parent div of the embedded_post divs, screw up your structure and cause postioning problems.
It works fine when I try it.
p.s. keep in mind that in Firefox, the padding adds to the width/height of the div while this doesn't happen in other browsers.
I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.
That was the quick and short question, for a little more details and an example, please see below.
I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.
And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.
Please see the following example.
I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.
Each "row" is floated to the left so that they appear horizontally.
<div class="container">
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
</div>
.row {
float: left;
}
In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?
Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.
Thank you.
The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.
See this fiddle: http://jsfiddle.net/XYzea/1/
Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element
The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line