I am trying to create a simple two column layout which has one big image followed by two columns, left one for image right one for text.
But I'm not able to align the image column with the top big image.
I can add a class with -15px margin but then there is misalignment in XS screen size.
I can add another -15px margin for xs screen also then I might have to fix something else. This is such a basic layout issue, I have a feeling I am doing something wrong.
Can you guys suggest what I am doing wrong and how should I approach two column layout in Bootstrap 3?
Here is the Bootply Link
The <div class="col-sm-12"> in the lower box causes the trouble. You have two options here:
Just delete the div
Add an additional <div class="row"> after the <div class="col-sm-12">
You were essentially creating a nested grid and bootstrap requires you to begin every new nesting level with a new <div class="row">
See: http://www.bootply.com/sh13QtYpFP
#bspellmeyer is correct. When nesting columns in Bootstrap, you need to add a row and then your nested columns.
HERE IS WHY
The grid works with 3 parts: a container, a row and column(s)...
The container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.
The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.
I promise that once this sinks in, making the grid behave exactly how you want every time will be a breeze.
You need to add :
.custom-left {
padding: 0;
}
to your .custom-left class. Add the same to your .custom-right class if you want to align this div with the top image as well.
Updated Bootply: http://www.bootply.com/iQYEpYqXJZ
Related
I'm trying to improve my project's HTML structure and I found something along these lines:
<div class="full-sidebar">
<div class="col-xs-12"></div>
</div>
Where "full-sidebar" is a custom class.
What I've been wondering is: is it a good idea to do so? Would I be better off in wrapping the column divs in a row? It just feels "wrong" done in the current way.
I know of at least one reason to use a row.
"cols-" are floated and wrapping them in a row adds a clear after all columns. This prevents subsequent content from potentially overlapping with your columns. Additionally, it also ensures the row's height is equivalent to the height of the column content. If you don't clear the columns' container, then the container will not include the column in its own height.
Note that "col-" is only floated at widths greater than 992px. So you'll only run into content overlap issues above that limit. See this fiddle.
HTML:
<div class="norow">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
CSS:
.row {
border: 2px solid yellow;
}
.norow {
border: 2px solid green;
}
.col-md-6 {
height: 50px;
border: 2px solid red;
}
Also, as others have mentioned, col padding and margins are designed to work in conjunction with row padding and margins.
You should always wrap <div class="col-xs-12"></div> inside <div class="row"></div>.
Reason-1
That's the bootstrap grid-system. We use bootstrap to make a layout clean and responsive. It doesn't create any harm if you do so.
Reason-2
If you don't wrap within <div class="row"></div> it will create unnecessary problem in near future once your layout grows long. You won't be able to keep a track of your layout.
so, in general it is good to wrap it inside <div class="row"></div>, if you don't have a solid reason for not doing it.
Hope this helps!
Actually it is not standard procedure to use bootstrap column classes outside the row. It might disturb the layout of the column design. In bootstrap css file each column class has assigned different width percentage according to their use. If you use column classes outside the row class it may form different or disturbed layout than actual layout prescribed by the bootstrap. So it is not a good practice to do.
Grid System Rules
Some Bootstrap grid system rules specified by w3Schools.com
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
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
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Is using twitter bootstrap column classes outside rows a good idea?
No.
Bootstrap col-* should only be used within row. From the docs..
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
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.
Also see: Bootstrap Rows and Columns - Do I need to use row?
Often designers prototype our websites by using tools like Illustrator, Sketch, etc. and when doing so designers try to keep in mind the grid that the developer will be using to best communicate exact measurements to the developer.
Grids are often implemented in the following order:
Margin (Optional)
Column
Gutter
Repeat 2&3
Margin (Optional)
After setting up a grid in a tool, designers will attempt to place blocks to the grid system, starting with the column and NOT the gutter. As shown below:
However, in Bootstrap v3 some elements take up the width of the gutters and thus this may be inappropriate and leads to confusion on how properly to design for these websites. In the example below these are form inputs. Notice how the input starts and includes the 15px gutter padding (inserted twelve .col-xs-1 with spans inside to indicate borders). Codepen Link
.col-xs-1, .col-xs-3
background-color: blue
.col-xs-1 span, .col-xs-3 span
background-color: pink
.form-control
background-color: black !important`
Yet in my design, I've attempted to start from the column as shown below (The columns are indicated by the space in GRAY, the columns are just thin due to responsiveness but the gutters remain the same -- sized down for the iPhone 6 Plus).
Am I misunderstanding something? As I'm developing and designing the product myself, I'm unsure as to how I can get exact measurements in Bootstrap for these elements that contain the gutter in the design, then develop it to match the design. How do I design to a Bootstrap grid when some elements, it seems, take up the width of the gutter? Or conversely, how do I alter the Bootstrap code so that some elements do NOT take the width of the gutter?
Do elements TYPICALLY take the width of the gutter? If so, why are designers expected to design from the column?
(PS I am aware that there's a design Stack Exchange, but I feel like this question may come from a misunderstanding of Bootstrap rather than design principles)
I see your conundrum.
To truly understand TWBS' grid system one needs to disregard prior learning... the design framework of the margin-column-gutter, though correct, applies to frameworks like 960gs. This framework is based on fixed width grid systems with "columns" set a fixed px-based width. You've assumed this as your wireframe.
TWBS is a responsive framework - the major difference is that one cannot fix the widths because beeing responsive; the width needs to scale ("move" as the screen resizes), and thus based on percentages.
Web layout is a set of columns, like this:
<div class="container">
<div class="row">
<div class="col-md-*">content</div>
...
</div>
</div>
and the columns have "padding" (both left and right). The framework is thus padding-column-padding-repeated.
See this JSFiddle for an example.
although I am not quite sure I understand your question, let me give you some insight that might help you.
Although I have met clients that want their designs replicated 1:1, imho it doesn't really matter if a column is 90 or 100px wide as long as it follows the same principles along the whole site and looks uniform.
Bootstrap doesn't have gutter between columns as a margin but as a padding withing the columns. That is, each column has a specific percentage width - by default divided by 12ths - and within this column a padding exists in either side of the column - by default 15px.
The container of these columns - the row class, has a negative margin equal to the padding within this columns. This way, the first and last columns' width is actually the column-width minus one padding from either side of the column, but in total they end up the width of the parent wrapper container. The negative margin and the column padding should be defined depending on the GUTTER width you prefer between columns like:
gutter width = 2x padding width
padding width = row negative margin width
Hope it makes sense.
Thought of adding more to the answers above,
12 columns grids system is the default of TWBS 3.xx, as well as the 15px padding/gutter.
Note: 12 column grid system is a tested design for the best user experience for screen responsive
So the design template you used above is clearly for the default bootstrap. And designers does not have to be stick to it. Unless they are ok with it. And if designers want to have different gutter rhythm other than 15px, e.g. 10px. or different column numbers, still they can generate a custom version by compiling the bootstrap sourcecode. Or the easiest way is to use the customize tool on the site.
Tip: You can remove the gutters by using simple css lines if needed. See below for the solution
So explaining the TWBS grid system
Bootstrap starts with 100%/12 width column cells
And then each cells has 15px padding left & right
Explaining further,
<div class="container">
<div class="row">
<div class="col-md-*">content</div>
...
</div>
</div>
Starts with class="container" comes with 15px padding both left and right
Then class="row"comes with -15px padding both left and right
So this resets the 15px starting and ending gaps
Then class="col-md-*" has padding of 15px. So if you put another container inside and change the background color for it, you can see gaps on both sides.
So this is why you see the gutters there in your example.
Quick solution,
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
I don't think I asked this as clearly as I could for easy searching, but here goes:
How can I make a bootstrap column extend to a larger height so that when the columns wrap around, they get offset by it even if it's not tall enough to cause that normally.
Essentially, how do I make the bottom panel in this bootply stay centered in both cases?
http://www.bootply.com/FCgrUtGuQ0
My left panel will be of variable length, which means that if I use a col-x-offset-x it will get pushed over further if the left panel extends below middle.
If I add the bottom panel to a new row then it will have whitespace above it if the panel left is longer than middle.
I tried the negative margin trick without success. It lets you change the background colour which those examples all used, but it doesn't seem to cause the floated panels to shift right.
I need this layout to behave differently at smaller screen sizes, so I can't just put the middle and bottom in the same col-x-6 as this is actually my lg layout, and at sm I need it to act with left at the top in a row, middle and right as two columns in the second row, and bottom as a third row.
Negative margin trick:
.row {
overflow:hidden;
}
#extend-down {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
This isn't answering my own question directly, as it doesn't explain how to expand the column height to make the repositioning happen properly, and it's not generic to all column sizes and arrangements.
But in my exact case this arrangement of columns and rows case can be solved with two master columns and then separating the contents of the second, where 3-6-3 columns can easily be made to be 3-9(4-8) columns which maintain the same 3-6-3 spacing.
http://www.bootply.com/UTq2klEuCG
By putting the middle, right, and bottom in the second column then letting those wrap around naturally seems to handle all my cases with this specific layout.
So I went from
col-x-3
col-x-6
col-x-3
col-x-6
to
col-x-3
col-x-9
{
col-x-8
col-x-4
col-x-8
}
This isn't ideal, as a 2-8-2 arrangement might be best at a large screen size, but the math doesn't work to easily create a subset within the col-x-10 that would need that follows the same spacing as a 2-8-2.
I have a question about what would cause the following error in bootstrap 3.
Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.
Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.
Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated
columns / div.
However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.
Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?
I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.
TWBS-2
http://getbootstrap.com/2.3.2/scaffolding.html#global
TWBS-3
http://getbootstrap.com/css/#grid-intro
The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.
Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.
FIRST ISSUE:
Let's say I have a section in my website where I want to break the width of the container 1200px width. In this section I need to position an image on the very left side of the browser screen and on the right side some text.
I assume that in order to make this I have to use container-fluid and I'm using it like this:
<div class="container-fluid">
<div class="row">
<div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
</div>
</div>
When I check this in the browser:
It appears an horizontal scrollbar and I have to remove the negative margins of the .row class in order to get rid of the scrollbar.
Is this the normal way of doing this?
SECOND ISSUE:
Let's say I want to create a section where I want to have a full width background color and the content to be withing the default bootstrap grid width of 1200px.
Is it necessary to create an container-fluid in order to do this? Or is better just to create an extra div an add there the background color ?
In Bootstrap, the grid is defined by three components: the container, the row and the column(s). The container comes in two flavors: container, which sets the max-width of the container for each of the specific breakpoints defined in Bootstrap and centers the container within the viewport; and the container-fluid, which simply sets the width to 100% of the viewport display. Both the containers set the padding to 15px.
The purpose of the row is to contain the columns which float left by default, so it will automatically clear the float. It has a -15px margin to negate the padding added by the container.
The columns go inside your rows. Columns are based on a grid of 12. If you only need one column at the x-small breakpoint and up, then add one col-xs-12. Want two equal columns at that viewport width, add two col-xs-6. Columns have 15px of padding left and right, so there are always consistent gutters.
The row margins negating the container width may sound useless, but it's important and very clever, because it allows you to nest rows and columns inside other columns allowing you to create an endless combination of grid divisions.
So, your issue is that you're not using the grid the way it is designed. You must have at least one column inside a row inside a container.
In bootstrap you need the following structure:
<div class="container-fluid">
<div class="row">
<div class="col-xx-xx">
...content goes here...
</div>
</div>
</div>
The reason of this structure is that the container will try to grab and center the content, in the case of the .container-fluid, it grabs 100% width columns instead of the traditional ~960ish pixels that has been used.
The row will allow you to allocate 12 columns of content in the order you decide, which is the next div.
The class .col-xx-xx will allow you to specify the breaking point of that column, lg for large devices, md for medium devices sm and xs for mobile/tablet devices.
The second dual xx in .col-xx-xx will allow you to specify how many of the 12 columns you're going to take in that container. For Example, .col-lg-3 Will be a column who's breaking point is as large device (1200px or so) and it will take 3 column spaces.
So it is necessary to use the structure above, else you will have that scrollbar on the x-axis bothering.
EDIT
As for your second problem, it is really necessary that you use the structure given above in the code, you want it to be full width? that means, no margins and paddings, I have a small trick for that that I have been using for a while now, I'll explain it below:
Use a container with the class of jumbotron as follows:
<div class="jumbotron my-own-jumbotron">
...content goes here
<div>
Since the jumbotron es designed to be responsive, it will act as a responsive container. on the next class, .my-own-jumbotron specify the background image or color you want for it, and depending on the content you add to it, it will adjust the size of it. I don't know if that's the solution you're looking for, but here's a demo:
https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/
The third div will be a jumbotron with a custom background-image that expands as needed, and you can resize it and view it on a mobile device, and it is complete responsive, and full width.
I found that this way, it is not necessary to use the .container-fluid div.