Useful Snippets

Useful Snippets


This blog is used to collect useful snippets related to Linux, PHP, MySQL and more. Feel free to post comments with improvements or questions!

August 2020
M T W T F S S
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Categories


Decoupled standalone Bootstrap 3 Grid

Stanislav KhromovStanislav Khromov

Ever wanted to use the Bootstrap 3 Grid on a site that doesn’t use Bootstrap? Sure, you can load the entire bootstrap.min.css, but why force users to download that much extra stuff? Even worse, it may override existing styles on your site.

Thanks to the magic of LESS, it’s possible to make a CSS file with just the grid from Bootstrap 3.

Additionally, it uses its own class prefix (sc-), so it can even co-exist with an existing site running Bootstrap.

Click here to get the CSS! (GitHub Gist)

Example usage:

<div class="sc-container-fluid">
    <div class="sc-row">
        <div class="sc-col-sm-6">
            Left
        </div>
        <div class="sc-col-sm-6">
            <div class="sc-col-sm-6">
                Right - Inside left
            </div>
            <div class="sc-col-sm-6">
                Right - Inside right
            </div>
        </div>
    </div>
</div>

Web Developer at Aftonbladet (Schibsted Media Group)
Any opinions on this blog are my own and do not reflect the views of my employer.
LinkedIn
Twitter
WordPress.org Profile
Visit my other blog

Comments 0
There are currently no comments.