Get Started

Start your next web project with Pure.

Add Pure to Your Page

You can add Pure to your page via the free unpkg CDN. Just add the following <link> element into your page's <head>, before your project's stylesheets.

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

Add the Viewport Meta Element

The viewport meta element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width. Add this into your page's <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Understand Pure Grids

Pure's grid system is very simple. You create a row by using the .pure-g class, and create columns within that row by using the pure-u-* classes.

Here's a grid with three columns:

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

Thirds

Thirds

Thirds

Responsive Grids

Pure's grid system is also mobile-first and responsive, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames. If needed, you can customize Pure Grids below, but let's start off with an example.

You'll need to also include Pure's grids-responsive.css onto your page:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->

Here's the default responsive breakpoints included in grids-responsive.css:

Key CSS Media Query Applies Classname
None None Always .pure-u-*
sm @media screen and (min-width: 35.5em) 568px .pure-u-sm-*
md @media screen and (min-width: 48em) 768px .pure-u-md-*
lg @media screen and (min-width: 64em) 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) 1280px .pure-u-xl-*

Here's an example of what you'd be able to do. Try resizing your screen to see how the grid responds.

.pure-u-1
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-3-4
.pure-u-1
.pure-u-md-1-4

Build Your Pure Starter Kit

Now that you know how grids work, you might want to customize things to better suit your web project. You can define your own breakpoints by specifying a CSS Media Queries. You can also customize the number of columns that your layout needs.

We'll generate an index.html file, and if needed, a grid.css file that you can download and use as the starting-point for your project.

Grids Media Queries

You can use Pure's default CSS Media Queries which will add grids-responsive.css to your Pure Starter Kit, or we can generate a mobile-first, responsive grid if you provide us with the breakpoints.

Pure's generated Responsive Grids is simple to use. It provides you with a specific CSS classname for each Media Query. For example, pure-u-md-* for devices with width >= 768px, and pure-u-lg-* for devices with width >= 1024px.

What Media Queries should your grid system respond to?

Grid Key
.pure-u-{key}-*
Media Query
screen and (min-width: 48em)

Grid Options

Pure has a 5ths and 24ths-column grid system by default. You define an element's width using fractional classnames, e.g; .pure-u-2-5 for width: 40%, or .pure-u-12-24 for width: 50%. You can view all the grid units that are available in the default grid.

You can customize the number of columns; the default grid is 24 columns. You can also change the Grids classname prefix; the default is .pure-u-.

Your Pure Starter Kit will be generated below in real-time as you make your customizations. When you're ready, just download it!

Here's what the downloaded zip file contains.

<!doctype html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                
                    <title>Your page title</title>
                
                    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">    <!--[if lte IE 8]>
                        <link rel="stylesheet" href="grid-old-ie.css">
                    <![endif]-->
                    <!--[if gt IE 8]><!-->
                        <link rel="stylesheet" href="grid.css">
                    <!--<![endif]--></head>
                
                <body>
                    <!--
                    Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
                    -->
                </body>
                </html>
                .col-1,
                .col-1-1,
                .col-1-2,
                .col-1-3,
                .col-2-3,
                .col-1-4,
                .col-3-4,
                .col-1-6,
                .col-5-6,
                .col-1-12,
                .col-2-12,
                .col-3-12,
                .col-4-12,
                .col-5-12,
                .col-6-12,
                .col-7-12,
                .col-8-12,
                .col-9-12,
                .col-10-12,
                .col-11-12,
                .col-12-12 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .col-1-12 {
                    width: 8.3333%;
                    *width: 8.3023%;
                }
                
                .col-1-6,
                .col-2-12 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .col-1-4,
                .col-3-12 {
                    width: 25%;
                    *width: 24.9690%;
                }
                
                .col-1-3,
                .col-4-12 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .col-5-12 {
                    width: 41.6667%;
                    *width: 41.6357%;
                }
                
                .col-1-2,
                .col-6-12 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .col-7-12 {
                    width: 58.3333%;
                    *width: 58.3023%;
                }
                
                .col-2-3,
                .col-8-12 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .col-3-4,
                .col-9-12 {
                    width: 75%;
                    *width: 74.9690%;
                }
                
                .col-5-6,
                .col-10-12 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .col-11-12 {
                    width: 91.6667%;
                    *width: 91.6357%;
                }
                
                .col-1,
                .col-1-1,
                .col-12-12 {
                    width: 100%;
                }
                
                @media screen and (min-width: 35.5em) {
                    .col-sm-1,
                    .col-sm-1-1,
                    .col-sm-1-2,
                    .col-sm-1-3,
                    .col-sm-2-3,
                    .col-sm-1-4,
                    .col-sm-3-4,
                    .col-sm-1-6,
                    .col-sm-5-6,
                    .col-sm-1-12,
                    .col-sm-2-12,
                    .col-sm-3-12,
                    .col-sm-4-12,
                    .col-sm-5-12,
                    .col-sm-6-12,
                    .col-sm-7-12,
                    .col-sm-8-12,
                    .col-sm-9-12,
                    .col-sm-10-12,
                    .col-sm-11-12,
                    .col-sm-12-12 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .col-sm-1-12 {
                        width: 8.3333%;
                        *width: 8.3023%;
                    }
                
                    .col-sm-1-6,
                    .col-sm-2-12 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .col-sm-1-4,
                    .col-sm-3-12 {
                        width: 25%;
                        *width: 24.9690%;
                    }
                
                    .col-sm-1-3,
                    .col-sm-4-12 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .col-sm-5-12 {
                        width: 41.6667%;
                        *width: 41.6357%;
                    }
                
                    .col-sm-1-2,
                    .col-sm-6-12 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .col-sm-7-12 {
                        width: 58.3333%;
                        *width: 58.3023%;
                    }
                
                    .col-sm-2-3,
                    .col-sm-8-12 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .col-sm-3-4,
                    .col-sm-9-12 {
                        width: 75%;
                        *width: 74.9690%;
                    }
                
                    .col-sm-5-6,
                    .col-sm-10-12 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .col-sm-11-12 {
                        width: 91.6667%;
                        *width: 91.6357%;
                    }
                
                    .col-sm-1,
                    .col-sm-1-1,
                    .col-sm-12-12 {
                        width: 100%;
                    }
                }
                
                @media screen and (min-width: 48em) {
                    .col-md-1,
                    .col-md-1-1,
                    .col-md-1-2,
                    .col-md-1-3,
                    .col-md-2-3,
                    .col-md-1-4,
                    .col-md-3-4,
                    .col-md-1-6,
                    .col-md-5-6,
                    .col-md-1-12,
                    .col-md-2-12,
                    .col-md-3-12,
                    .col-md-4-12,
                    .col-md-5-12,
                    .col-md-6-12,
                    .col-md-7-12,
                    .col-md-8-12,
                    .col-md-9-12,
                    .col-md-10-12,
                    .col-md-11-12,
                    .col-md-12-12 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .col-md-1-12 {
                        width: 8.3333%;
                        *width: 8.3023%;
                    }
                
                    .col-md-1-6,
                    .col-md-2-12 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .col-md-1-4,
                    .col-md-3-12 {
                        width: 25%;
                        *width: 24.9690%;
                    }
                
                    .col-md-1-3,
                    .col-md-4-12 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .col-md-5-12 {
                        width: 41.6667%;
                        *width: 41.6357%;
                    }
                
                    .col-md-1-2,
                    .col-md-6-12 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .col-md-7-12 {
                        width: 58.3333%;
                        *width: 58.3023%;
                    }
                
                    .col-md-2-3,
                    .col-md-8-12 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .col-md-3-4,
                    .col-md-9-12 {
                        width: 75%;
                        *width: 74.9690%;
                    }
                
                    .col-md-5-6,
                    .col-md-10-12 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .col-md-11-12 {
                        width: 91.6667%;
                        *width: 91.6357%;
                    }
                
                    .col-md-1,
                    .col-md-1-1,
                    .col-md-12-12 {
                        width: 100%;
                    }
                }
                
                @media screen and (min-width: 64em) {
                    .col-lg-1,
                    .col-lg-1-1,
                    .col-lg-1-2,
                    .col-lg-1-3,
                    .col-lg-2-3,
                    .col-lg-1-4,
                    .col-lg-3-4,
                    .col-lg-1-6,
                    .col-lg-5-6,
                    .col-lg-1-12,
                    .col-lg-2-12,
                    .col-lg-3-12,
                    .col-lg-4-12,
                    .col-lg-5-12,
                    .col-lg-6-12,
                    .col-lg-7-12,
                    .col-lg-8-12,
                    .col-lg-9-12,
                    .col-lg-10-12,
                    .col-lg-11-12,
                    .col-lg-12-12 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .col-lg-1-12 {
                        width: 8.3333%;
                        *width: 8.3023%;
                    }
                
                    .col-lg-1-6,
                    .col-lg-2-12 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .col-lg-1-4,
                    .col-lg-3-12 {
                        width: 25%;
                        *width: 24.9690%;
                    }
                
                    .col-lg-1-3,
                    .col-lg-4-12 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .col-lg-5-12 {
                        width: 41.6667%;
                        *width: 41.6357%;
                    }
                
                    .col-lg-1-2,
                    .col-lg-6-12 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .col-lg-7-12 {
                        width: 58.3333%;
                        *width: 58.3023%;
                    }
                
                    .col-lg-2-3,
                    .col-lg-8-12 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .col-lg-3-4,
                    .col-lg-9-12 {
                        width: 75%;
                        *width: 74.9690%;
                    }
                
                    .col-lg-5-6,
                    .col-lg-10-12 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .col-lg-11-12 {
                        width: 91.6667%;
                        *width: 91.6357%;
                    }
                
                    .col-lg-1,
                    .col-lg-1-1,
                    .col-lg-12-12 {
                        width: 100%;
                    }
                }
                
                @media screen and (min-width: 80em) {
                    .col-xl-1,
                    .col-xl-1-1,
                    .col-xl-1-2,
                    .col-xl-1-3,
                    .col-xl-2-3,
                    .col-xl-1-4,
                    .col-xl-3-4,
                    .col-xl-1-6,
                    .col-xl-5-6,
                    .col-xl-1-12,
                    .col-xl-2-12,
                    .col-xl-3-12,
                    .col-xl-4-12,
                    .col-xl-5-12,
                    .col-xl-6-12,
                    .col-xl-7-12,
                    .col-xl-8-12,
                    .col-xl-9-12,
                    .col-xl-10-12,
                    .col-xl-11-12,
                    .col-xl-12-12 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .col-xl-1-12 {
                        width: 8.3333%;
                        *width: 8.3023%;
                    }
                
                    .col-xl-1-6,
                    .col-xl-2-12 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .col-xl-1-4,
                    .col-xl-3-12 {
                        width: 25%;
                        *width: 24.9690%;
                    }
                
                    .col-xl-1-3,
                    .col-xl-4-12 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .col-xl-5-12 {
                        width: 41.6667%;
                        *width: 41.6357%;
                    }
                
                    .col-xl-1-2,
                    .col-xl-6-12 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .col-xl-7-12 {
                        width: 58.3333%;
                        *width: 58.3023%;
                    }
                
                    .col-xl-2-3,
                    .col-xl-8-12 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .col-xl-3-4,
                    .col-xl-9-12 {
                        width: 75%;
                        *width: 74.9690%;
                    }
                
                    .col-xl-5-6,
                    .col-xl-10-12 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .col-xl-11-12 {
                        width: 91.6667%;
                        *width: 91.6357%;
                    }
                
                    .col-xl-1,
                    .col-xl-1-1,
                    .col-xl-12-12 {
                        width: 100%;
                    }
                }
                
                .col-1,
                .col-1-1,
                .col-1-2,
                .col-1-3,
                .col-2-3,
                .col-1-4,
                .col-3-4,
                .col-1-6,
                .col-5-6,
                .col-1-12,
                .col-2-12,
                .col-3-12,
                .col-4-12,
                .col-5-12,
                .col-6-12,
                .col-7-12,
                .col-8-12,
                .col-9-12,
                .col-10-12,
                .col-11-12,
                .col-12-12 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .col-1-12 {
                    width: 8.3333%;
                    *width: 8.3023%;
                }
                
                .col-1-6,
                .col-2-12 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .col-1-4,
                .col-3-12 {
                    width: 25%;
                    *width: 24.9690%;
                }
                
                .col-1-3,
                .col-4-12 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .col-5-12 {
                    width: 41.6667%;
                    *width: 41.6357%;
                }
                
                .col-1-2,
                .col-6-12 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .col-7-12 {
                    width: 58.3333%;
                    *width: 58.3023%;
                }
                
                .col-2-3,
                .col-8-12 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .col-3-4,
                .col-9-12 {
                    width: 75%;
                    *width: 74.9690%;
                }
                
                .col-5-6,
                .col-10-12 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .col-11-12 {
                    width: 91.6667%;
                    *width: 91.6357%;
                }
                
                .col-1,
                .col-1-1,
                .col-12-12 {
                    width: 100%;
                }
                
                .col-sm-1,
                .col-sm-1-1,
                .col-sm-1-2,
                .col-sm-1-3,
                .col-sm-2-3,
                .col-sm-1-4,
                .col-sm-3-4,
                .col-sm-1-6,
                .col-sm-5-6,
                .col-sm-1-12,
                .col-sm-2-12,
                .col-sm-3-12,
                .col-sm-4-12,
                .col-sm-5-12,
                .col-sm-6-12,
                .col-sm-7-12,
                .col-sm-8-12,
                .col-sm-9-12,
                .col-sm-10-12,
                .col-sm-11-12,
                .col-sm-12-12 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .col-sm-1-12 {
                    width: 8.3333%;
                    *width: 8.3023%;
                }
                
                .col-sm-1-6,
                .col-sm-2-12 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .col-sm-1-4,
                .col-sm-3-12 {
                    width: 25%;
                    *width: 24.9690%;
                }
                
                .col-sm-1-3,
                .col-sm-4-12 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .col-sm-5-12 {
                    width: 41.6667%;
                    *width: 41.6357%;
                }
                
                .col-sm-1-2,
                .col-sm-6-12 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .col-sm-7-12 {
                    width: 58.3333%;
                    *width: 58.3023%;
                }
                
                .col-sm-2-3,
                .col-sm-8-12 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .col-sm-3-4,
                .col-sm-9-12 {
                    width: 75%;
                    *width: 74.9690%;
                }
                
                .col-sm-5-6,
                .col-sm-10-12 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .col-sm-11-12 {
                    width: 91.6667%;
                    *width: 91.6357%;
                }
                
                .col-sm-1,
                .col-sm-1-1,
                .col-sm-12-12 {
                    width: 100%;
                }
                
                .col-md-1,
                .col-md-1-1,
                .col-md-1-2,
                .col-md-1-3,
                .col-md-2-3,
                .col-md-1-4,
                .col-md-3-4,
                .col-md-1-6,
                .col-md-5-6,
                .col-md-1-12,
                .col-md-2-12,
                .col-md-3-12,
                .col-md-4-12,
                .col-md-5-12,
                .col-md-6-12,
                .col-md-7-12,
                .col-md-8-12,
                .col-md-9-12,
                .col-md-10-12,
                .col-md-11-12,
                .col-md-12-12 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .col-md-1-12 {
                    width: 8.3333%;
                    *width: 8.3023%;
                }
                
                .col-md-1-6,
                .col-md-2-12 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .col-md-1-4,
                .col-md-3-12 {
                    width: 25%;
                    *width: 24.9690%;
                }
                
                .col-md-1-3,
                .col-md-4-12 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .col-md-5-12 {
                    width: 41.6667%;
                    *width: 41.6357%;
                }
                
                .col-md-1-2,
                .col-md-6-12 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .col-md-7-12 {
                    width: 58.3333%;
                    *width: 58.3023%;
                }
                
                .col-md-2-3,
                .col-md-8-12 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .col-md-3-4,
                .col-md-9-12 {
                    width: 75%;
                    *width: 74.9690%;
                }
                
                .col-md-5-6,
                .col-md-10-12 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .col-md-11-12 {
                    width: 91.6667%;
                    *width: 91.6357%;
                }
                
                .col-md-1,
                .col-md-1-1,
                .col-md-12-12 {
                    width: 100%;
                }
                
                .col-lg-1,
                .col-lg-1-1,
                .col-lg-1-2,
                .col-lg-1-3,
                .col-lg-2-3,
                .col-lg-1-4,
                .col-lg-3-4,
                .col-lg-1-6,
                .col-lg-5-6,
                .col-lg-1-12,
                .col-lg-2-12,
                .col-lg-3-12,
                .col-lg-4-12,
                .col-lg-5-12,
                .col-lg-6-12,
                .col-lg-7-12,
                .col-lg-8-12,
                .col-lg-9-12,
                .col-lg-10-12,
                .col-lg-11-12,
                .col-lg-12-12 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .col-lg-1-12 {
                    width: 8.3333%;
                    *width: 8.3023%;
                }
                
                .col-lg-1-6,
                .col-lg-2-12 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .col-lg-1-4,
                .col-lg-3-12 {
                    width: 25%;
                    *width: 24.9690%;
                }
                
                .col-lg-1-3,
                .col-lg-4-12 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .col-lg-5-12 {
                    width: 41.6667%;
                    *width: 41.6357%;
                }
                
                .col-lg-1-2,
                .col-lg-6-12 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .col-lg-7-12 {
                    width: 58.3333%;
                    *width: 58.3023%;
                }
                
                .col-lg-2-3,
                .col-lg-8-12 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .col-lg-3-4,
                .col-lg-9-12 {
                    width: 75%;
                    *width: 74.9690%;
                }
                
                .col-lg-5-6,
                .col-lg-10-12 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .col-lg-11-12 {
                    width: 91.6667%;
                    *width: 91.6357%;
                }
                
                .col-lg-1,
                .col-lg-1-1,
                .col-lg-12-12 {
                    width: 100%;
                }