Bootstrap grids responsive - html

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>

Related

Multiple rows inside a row with Bootstrap 4

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?

How do i make the last div in a row overflow into the next row?

I have 3 rows in my webpage using bootstraps grid. The first row has 3 divs of equal width while the next two rows have 2 divs of the same width left aligned. However, the last div of the first row is longer than the first two divs and I want it to overflow into the second row. How would I do this?
I have a link here of what I mean: http://imgur.com/a/mxnaH
You would have to separate the page in example "content-left, content-right". Bootstrap isn't supposed to be used to have rows overflow in to another. So if you give content-left a width of like 8, and content-right 4. That way you can have different heights and make it seem like it's overflowing
Try this grid:
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-4"></div>
</div>
</div>

Bootstrap grid positioning

so I'm trying to make a bootstrap website but I don't really know how to customize the widths and position of these grids. I'm a bootstrap beginner. Could you please help me? It DOESN'T have to be accurate so bad but I need to keep the layout.
How it should look like:
http://i.imgur.com/WAE161o.png
HTML:
<div style="margin-top:200px;" class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE MIDDLE, CENTERED AD-->
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-2 column">
</div>
<!--THIS ONE IS FOR BUTTONS STICKED TO THE POST ON THE LEFT-->
<div class="col-md-1 column">
</div>
<!--THIS ONE IS FOR THE POST AND BUTTONS STICKED ON THE BOTTOM-->
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE SIDEBAR-->
<div class="col-md-3 column">
</div>
<div class="col-md-2 column">
</div>
</div>
</div>
From Bootstrap 3.0 release
col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
vp = xs, sm, md, or lg
x = 1 thru 12
So the answer to your question is push/pull columns. For example, your ad row should be like this:
<div class="row">
<div class="col-sm-8 col-sm-pull-2 col-sm-push-2 advertisement">
your center column
</div>
</div>
and so on. See fiddle here
If you need specific columns with pixel-specific widths, you can't use the Bootstrap grid. The Bootstrap grid is broken into 12 equal sized columns. You can still use Bootstrap, just not the grid part. There is some limited customization that can be done with the grid system, but I don't think it can approach what you are trying to do. You'll need to use custom CSS to position the site how you want it.
If you just want something similar and don't care about exact widths, then you should follow the grid documentation. You are moving in the right direction but when you have nested columns you need to make sure you wrap in a row, which you don't have. You can also use the col-md-offset-* styles to shift columns so you don't have to "use" all 12 columns. For example for the main part of the site you might want the first column to be ".col-md-3 .col-md-offset-4" and the second ".col-md-3".

Stacking 2 divs on top

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>

Bootstrap, spanning two rows with an image while retaining responsiveness

I'm attempting a layout in bootstrap that is positioned using the following image.
I have two rows, the top half and the bottom half both containing two separate background gradients. The rows are both divided into 50% wide columns, with the right-most columns containing content and the left-most columns containing a single image.
My problem is that I'm unsure of how to get an element to span two rows vertically while still retaining it's fluid layout. I've positioned it absolutely but once the window scales down it doesn't stack properly. My layout is as follows. Getting rid of the rows and splitting the page into two vertical columns results in me being unsure of how to split the background into two separate horizontal gradients. Any help would be appreciated. Thanks!
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
<img src="wooo-im-an-image">
</div>
<div class="col-md-6">
content of a mostly blabberous nature here
</div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
emtpy
</div>
<div class="col-md-6">
more content of a mostly blabberous nature here
</div>
</div>
I'm not sure if I quite understand but I did put together an example using your picture. Pardon the CSS skills and let me know if it helps you.
<div class="row gradient">
<div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
</div>
</div>
Live Demo
http://www.bootply.com/116896