Sunday, June 18, 2017

A Nice 5 Column Bootstrap Layout If You Need It

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 -

    <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