Example code to illustrate my problem looks like:
<div class='body'>
<div class="container">
<div class="col-md-12">
<div class="col-md-6">
Col Left 1
</div>
<div class="col-md-6">
Col Right 1 ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</div>
<div class="col-md-6">
Col Left 2
</div>
</div>
</div>
</div>
This is how this renders, and the markup on the screenshot is what I would like to fix:
Ultimately, on my application, I would like to have my forms and buttons on one side, and my data display on the other like so:
What this is doing is pushing everything on the left down and creating a large space between the elements as shown in the example. How do I overcome this and keep the two columns separated?
Your code is incorrect. In Bootstrap grid layout, columns must be wrapped by rows. You can re-write your code as below:
<div class="container">
<div class="row">
<div class="col-md-6">
Col Left 1
</div>
<div class="col-md-6">
Col Right 1
</div>
<div class="col-md-6 border border-info">
Col Left 2
</div>
</div>
Your layout should now look like the picture below, without space between the columns:
bootstrap columns
Related
I have a 3 column layout with the code here for example. Right now when the browser window gets smaller it stacks from the 1st column on top, 2nd in the middle and then 3rd is last as expected. I want the columns to behave this way when the columns get smaller.
First - This column gets hidden and I have already established that in the CSS
Third - This is the first column on top.
Second- This column is on bottom.
<div class="row">
<div class="col-sm-3">First</div>
<div class="col-sm-6">Second</div>
<div class="col-sm-3">Third</div>
</div>
Use .order- classes for controlling the visual order of your content.
<div class="container">
<div class="row">
<div class="col-sm-3">
First, but unordered
</div>
<div class="col-sm-6 order-12">
Second, but last
</div>
<div class="col-sm-3 order-1">
Third, but first
</div>
</div>
</div>
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?
I would like to have a responsive list of items, dynamically fetched from the server (so the number of items is unknown).
According to Foundation 6, the block grid is the way to go. I have used the block grid successfully to show images, but when I try to create a grid inside a block grid column, it doesn't look too good.
Here is my code:
<div class="foods row small-up-1 medium-up-3 large-up-4">
<div class="food column">
<div class="row">
<div class="small-6 medium-4 large-3 columns picture ar-wrapper ar-4-3">
<div class="ar-container">
</div>
</div>
<div class="small-6 medium-8 large-9 columns data">
<div class="row">
<div class="small-12 columns title">
</div>
</div>
<div class="row">
<div class="small-12 columns description">
</div>
</div>
<div class="row">
<div class="small-12 columns restaurant-name">
</div>
</div>
</div>
</div>
</div>
</div>
None of the additional classes interfere with the width of change any float settings.
The result looks like this:
The tall block on the left is the "large-3 columns" element and the selected (blue-ish) element is the "large-9 columns" large div (it's made on a large screen). So by the looks of it, the block grid column has more than 12 simple grid columns.
I appreciate any help or alternative solutions on how to solve this.
I've used Bootstrap in the past but cannot find how to do a basic stacking of 2 divs, it's basically 2 col-lg-6 divs sat on top of each other but against one div to the left of it (see picture).
How should the HTML look for this? Should it all be in the one row or is there special classes for doing this?
so you will want a row, inside that row you want a col-6 division. on the 2nd division, just add stuff
DEMO: http://jsbin.com/hikopu/1/
<div class="row">
<div class="col-lg-6">
[left]
</div>
<div class="col-lg-6">
[right]
<div class="col-lg-12">
[right top]
</div>
<div class="col-lg-12">
[right bottom]
</div>
</div>
</div>
I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid