I am building an hybrid-app with ionic and I am trying to build a grid with two columns with width: 25%. This is the snippet with my code:
<div class="row">
<div class="col col-offset-25 col-25">1</div>
<div class="col col-25">2</div>
<div class="col col-25"> <!-- Empty --> </div>
</div>
The structure is working, but I have to use an empty column to get the result. Is it possible to apply col-offset-25 on the right of the second <div> tag?
If you remove the third column you should get what you are looking for (if I understand you intention right)
<div class="row">
<div class="col col-offset-25 col-25">1</div>
<div class="col col-25">2</div>
</div>
The first column will have offset 25%, take 25% if the width. The second column will be the next and will also 25% of the width. And after that there will be 25% gap
Related
I am trying to make the front end using materialize and I have used Django for the backend. The current look I am getting is something like this:
And I want it to be more like this:
I am using Django and Materialize. And here is the code I have written.
This layout is easy to achieve with CSS grid, but if you wanted to approximate it with the Materialize grid, you just need to fix your columns and use a bit of flex.
The example you want to replicate has two main columns:
<div class="row">
<!-- Two columns, wider on the left -->
<div class="col s12 l8">Left</div>
<div class="col s12 l4">Right</div>
</div>
The left hand column than has nested rows and columns, like this:
<div class="row">
<!-- Three columns -->
<div class="col s4"></div>
<div class="col s4"></div>
<div class="col s4"></div>
</div>
<div class="row">
<!-- One column -->
<div class="col s12"></div>
</div>
<div class="row">
<!-- Three columns -->
<div class="col s4"></div>
<div class="col s4"></div>
<div class="col s4"></div>
</div>
We need to use flex on two of the rows - this forces the content to stretch to fit. Be careful with flex, it breaks the grid system at small screen sizes.
We also need a bit of css to force the button to fill the container, and to remove the margin bottom from the last row. I've created a wrapper called .content that we'll use to apply the padding (same as the margin from the rows for consistency).
Codepen.
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 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>
I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).