Bootstrap more then 12 units [duplicate] - css

This question already has answers here:
Bootstrap 3 - Use more than 12 columns in a row
(3 answers)
Closed 4 years ago.
sometimes it works perfect, sometimes i have big problems with the following ..
Can i write it like this?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
Or does i have to seperate each "row"?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
in my current project the floating issn't correct so that the last column doesnt have the right margin..


Either you can use smaller units instead of larger ones, i.e., .col-md-3 instead of .col-md-6 or use fluid layout.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
<div class="container-fluid">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


Your first example reacts exactly as it should. Any time you have more than 12 cols, the offending cols bump down to the next row (not .row which is different). Because you have 16 cols, the last group of 4 sits on next row.
To fit 16 sections on a single visible row (again, not .row), you will need to nest columns like so:
http://www.bootply.com/2VfLJXjcXt
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test1
</div>
<div class="col-md-3">
Test2
</div>
<div class="col-md-3">
Test3
</div>
<div class="col-md-3">
Test4
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test5
</div>
<div class="col-md-3">
Test6
</div>
<div class="col-md-3">
Test7
</div>
<div class="col-md-3">
Test8
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test9
</div>
<div class="col-md-3">
Test10
</div>
<div class="col-md-3">
Test11
</div>
<div class="col-md-3">
Test12
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test13
</div>
<div class="col-md-3">
Test14
</div>
<div class="col-md-3">
Test15
</div>
<div class="col-md-3">
Test16
</div>
</div>
</div>

Related

Padding between columns in CSS

I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!

Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>

How to float bootstrap column up if available

I have a row with four containers, each col-md-6. Is there a way to position the third container such that it occupies the vertical space above it? I could make two columns, but the content of containers 2 and three could get large, so i would like the containers to rearrange based on the most efficient layout.
Bootstrap Columns
```
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>

It's a really interesting problem. Pity that you did not write an example of the code. Maybe you should consider to rearrange container on two separate columns (like in the code below) but I hope someone can answer this question better than me.
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content1 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content2 item-content">
...
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content3 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
</div>
</div>

Best approach to divide Bootstrap grid columns

I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?

Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>

You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>

Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>

You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.

Border layout with bootstrap

Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?

See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?

how to adjust the column width in bootstrap based in container?

i am creating the layout something like this :
[my layout on paper][1]
but from html and using bootstrap i got following like this :
http://jsfiddle.net/52VtD/7352/
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
<%--<div>
<span class="verticaltextname1">Project</span>
</div>
<div>
<span class="verticaltextname1">Work History</span>
</div>--%>
</div>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-xs-3">
<div class="topBox">About me</div>
</div>
<div class="col-xs-3">
<div class="topBox">Specialization</div>
</div>
<div class="col-xs-3">
<div class="topBox">Awards</div>
</div>
<div class=" col-xs-3">
<div class="topBox">Testimonials</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="topBox">Project</div>
</div>
<div class="col-xs-3">
<div class="topBox">Description</div>
</div>
<div class="col-xs-3">
<div class="topBox">Achievements</div>
</div>
<div class="col-xs-3">
<div class="topBox">Clients</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
WorkedAs
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Skills
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
Responsibilities
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Work involved
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/7352/
how can i adjust the greenyellow column as per my paper starch, and create the same space between each box?

Resources