Fluid Grid that includes Fixed Column Sizes using Twitter Bootstrap 3

For Example, Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes...

Demo

Fixed Col 220px
Fixed Col 160px

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View More

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View More

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View More



HTML

<div class="container">
        <div class="row">
                <div class="col-fixed-220">Fixed Col 220px</div>
                <div class="col-fixed-160">Fixed Col 160px</div>
                <div class="col-md-12 col-offset-400">
                        <div class="row">
                                <div class="col-sm-4">
                                        <h2>Heading</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                        <p><a href="#" role="button" class="btn btn-default">View More</a></p>
                                </div>
                                <div class="col-sm-4">
                                        <h2>Heading</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                        <p><a href="#" role="button" class="btn btn-default">View More</a></p>
                                </div>
                                <div class="col-sm-4">
                                        <h2>Heading</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                        <p><a href="#" role="button" class="btn btn-default">View More</a></p>
                                </div>
                        </div>
                </div>
        </div>
</div>

CSS

<style>
        .col-fixed-220 { 
                background: #037cd5; 
                width: 220px; 
                height: 100%; 
                position: fixed; 
        }
        .col-fixed-160 { 
                background: #fdd921; 
                width: 160px; 
                height: 100%; 
                position: fixed; 
                margin-left: 220px; 
        }
        .col-offset-400 { 
                padding-left: 400px; 
        }
</style>    

Copyright 2016 by WebiBeris.com. All Rights Reserved.