CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
PoppaFluff
PoppaFluff

Reputation: 35

bootstrap 2 column layout

bootstrap 2 column layout

Hello everyone,

I am looking for some assistance here. I have been requested to make the design above and am having issues with it as I am unable to create the 2 columns correctly.

Currently I am doing the following:

    <div class="col-lg-12">
    <hr>
    <div class="col-md-7">
        <div class="blogHead">
            <h2>The Cycle to Work Scheme information</h2>
        </div>
        <div class="blogBody">
            <p>Some text.</p><a class="btn lightBlueSolid">Press For More Information</a>
        </div>
    </div><!---- I repeat this div a few times -->
    <div class="col-md-5"><img alt="" class="img-responsive img-thumbnail pad-20" src="images/insentives/bike.jpg"></div>
</div>

Could I please get some guidance here, please do not post code. I seek guidance, not a solution :)

Upvotes: 0

Views: 2929

Answers (4)

lcolli98
lcolli98

Reputation: 169

Imagine a table with 12 columns. That's the logic Bootstrap uses.

So you have to decide what proportion you want. I'd say you want 8/12 columns for the left and side of your content, which leaves 4/12 columns for the right (in other words, the main chunk of your content takes up the first 75% of the page horizontally).

The code you need would be:

<html>
    <head>
        <!-- All the stuff here to link to Bootstrap -->
    </head>
    <body>
        <div class="container">
            <div class="col-sm-8">
                <!-- CONTENT HERE -->
            </div>
            <div class="col-sm-4">
                <!-- SIDEBAR CONTENT HERE -->
            </div>
        </div>
    </body>
</html>

In each div you can then use div id="row" to have content aligned horizontally between the two if you need that.

Hopefully that helps. It might be worth reviewing the Bootstrap documentation.

Upvotes: 0

D. Oussama
D. Oussama

Reputation: 43

    <div class="container">
        <div class="row"> 
            <div class="col-md-7"> 
            <!--This one here is the left part of the page, and it contains 
            as many rows as you want, rows defines your Blocks -->

                <div class="row">

                </div>

                <div class="row">

                </div>

                <div class="row">

                </div>
            </div>
            <div class="col-md-3 col-md-offset-2">
            <!-- here is the Right part of your page, costumize it as you 
            wish -->
            </div>
        </div>
    </div>

Upvotes: 0

Antikhippe
Antikhippe

Reputation: 6655

Your question is very basic and you will find all you need on the official documentation with lots of examples.

Upvotes: 2

Rahul
Rahul

Reputation: 1

<html>
<div class="col-md-12">
<div class=col-md-9 pull-left>
your left side content
</div>
<div class =col-md-3>
right side form
</div>
</div>
</html>

Upvotes: 0

Related Questions