CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Antonioz
Antonioz

Reputation: 151

Bootstrap: align the content

i'm working on this website http://ba-test.nowcommu.myhostpoint.ch/antonio2/ (Bootstrap)

As you can see the content is not perfectly aligned to the first slider. What i need is to perfectly align it (see the screenshot). I provide you the HTML code too:

enter image description here

HTML:

        <!-- Start 3 columns -->  
    <div class="row fluid bg" style="background-image: url('img/bg_section.png'); background-size: 100%; height: 666px;">
        <div class="col-lg-12">
            <div class="col-md-4">
                <h1 class="headline home">ARCHITEKTUR</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

              <div class="col-md-4">
                <h1 class="headline home">LAGE</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

            <div class="col-md-4">
                <h1 class="headline home">WOHNUNGEN</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

            <div class="col-md-8 picture">
            <img class="img-responsive" src="img/place.jpg" />
            <h2 class="text-under-picture">Lorem Ipsum. <strong>Proin</strong> gravida nibh vel<strong><br>velit</strong> auctor aliquet. Lorem <strong>Ipsum</strong></h2>    
            </div>

        </div>  
    </div>
   <!-- End 3 Columns -->

Upvotes: 0

Views: 56

Answers (1)

Wavemaster
Wavemaster

Reputation: 1824

With padding on .bg, you can achieve the effect:

.row.fluid.bg {
    margin-bottom: 500px;
    padding: 0 50px;   /* this is new - adjust the 50px if you want*/
}

(look at main.css line 92)

The good thing about this method is, that the inside columns adopting the new size.

As a little add-on, you could try to add

.navbar {
    margin-left: 64px;
    margin-right: 64px;
}

Upvotes: 2

Related Questions