I am adding this here because someone else might find this useful.
I needed a 5 column layout for Bootstrap.
Here it is what I am using. Feel free to use it if you need it.
The CSS -
The HTML -
Please make note of the @@ I am using in the style section. I am only doing that because I am adding the code here in the <style> tag. You don't need this if you are using the CSS in an external stylesheet.
To use this, create your page in whatever language/framework you use.
Copy and paste the CSS listed above between the <head> and </head> section in your code or in an external stylesheet.
Copy and paste the html section between the <body> and </body> section in your code.
Run your code and you should now see a page with examples of the 5 column layout.
Enjoy!
PLEASE NOTE - This Bootstrap layout requires Bootstrap :-)! This layout is Bootstrap 3.0 friendly.
Smooches,
Kila Morton
I needed a 5 column layout for Bootstrap.
Here it is what I am using. Feel free to use it if you need it.
The CSS -
<style>
@@media (min-width: 992px) {
.col-md-1-5 {
width: 20%;
}
.col-md-2-5 {
width: 40%;
}
.col-md-3-5 {
width: 60%;
}
.col-md-4-5 {
width: 80%;
}
.col-md-5-5 {
width: 100%;
}
}
@@media (min-width: 1200px) {
.col-lg-1-5 {
width: 20%;
}
.col-lg-2-5 {
width: 40%;
}
.col-lg-3-5 {
width: 60%;
}
.col-lg-4-5 {
width: 80%;
}
.col-lg-5-5 {
width: 100%;
}
}
/* This part is only needed so you can see how the various grid possibilities - this is not needed */
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
display: block;
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
text-align: center;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
[class^=col-] {
margin-bottom: 30px;
}
</style>
The HTML -
<div class="container">
<div class="page-header">
<h1>Bootstrap Grid (5 columns)</h1>
</div>
<h2>Boxed grid</h2>
<div class="row show-grid">
<div class="col-sm-6 col-md-1-5 col-lg-2-5">
<span>sm-6 md-1-5 lg-2-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-2-5">
<span>sm-6 md-1-5 lg-2-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-1-5">
<span>sm-6 md-1-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-3-5">
<span>sm-6 md-1-5 lg-3-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-1-5">
<span>sm-6 md-1-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-2-5 col-lg-1-5">
<span>sm-6 md-2-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-2-5">
<span>sm-6 md-3-5 lg-2-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-3-5">
<span>sm-6 md-1-5 lg-3-5</span>
</div>
<div class="col-sm-6 col-md-4-5 col-lg-1-5">
<span>sm-6 md-4-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-5-5 col-lg-1-5">
<span>sm-6 md-5-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5">
<span>sm-6 md-3-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-2-5 col-lg-1-5">
<span>sm-6 md-2-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-4-5 col-lg-1-5">
<span>sm-6 md-4-5 lg-1-5</span>
</div>
</div>
<h2>Full-width grid</h2>
</div>
<div class="container-fluid">
<div class="row show-grid">
<div class="col-sm-6 col-md-1-5 col-lg-2-5">
<span>sm-6 md-1-5 lg-2-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-2-5">
<span>sm-6 md-1-5 lg-2-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-1-5">
<span>sm-6 md-1-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-3-5">
<span>sm-6 md-1-5 lg-3-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-1-5">
<span>sm-6 md-1-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-2-5 col-lg-1-5">
<span>sm-6 md-2-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-2-5">
<span>sm-6 md-3-5 lg-2-5</span>
</div>
<div class="col-sm-6 col-md-1-5 col-lg-3-5">
<span>sm-6 md-1-5 lg-3-5</span>
</div>
<div class="col-sm-6 col-md-4-5 col-lg-1-5">
<span>sm-6 md-4-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-5-5 col-lg-1-5">
<span>sm-6 md-5-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5">
<span>sm-6 md-3-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-2-5 col-lg-1-5">
<span>sm-6 md-2-5 lg-1-5</span>
</div>
<div class="col-sm-6 col-md-4-5 col-lg-1-5">
<span>sm-6 md-4-5 lg-1-5</span>
</div>
</div>
</div>
Please make note of the @@ I am using in the style section. I am only doing that because I am adding the code here in the <style> tag. You don't need this if you are using the CSS in an external stylesheet.
To use this, create your page in whatever language/framework you use.
Copy and paste the CSS listed above between the <head> and </head> section in your code or in an external stylesheet.
Copy and paste the html section between the <body> and </body> section in your code.
Run your code and you should now see a page with examples of the 5 column layout.
Enjoy!
PLEASE NOTE - This Bootstrap layout requires Bootstrap :-)! This layout is Bootstrap 3.0 friendly.
Smooches,
Kila Morton
1 comment:
As stated by Stanford Medical, It is in fact the ONLY reason women in this country get to live 10 years more and weigh an average of 19 KG less than we do.
(And realistically, it is not about genetics or some secret exercise and really, EVERYTHING about "HOW" they are eating.)
P.S, What I said is "HOW", and not "WHAT"...
CLICK on this link to find out if this easy questionnaire can help you unlock your true weight loss potential
Post a Comment