CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mathias
Mathias

Reputation: 1

Cant align content properly with Bootstrap

I'm working on a project with a LED box which indicates when your car needs service. I'm currently creating a website to the "product", but i'm having problems aligning the content proberly using columns in bootstrap.

https://i.sstatic.net/sJnuP.jpg

I would like the content in the second section to be alinged like the first section, also when i resize the window

My code is looking like this

<div class="info-1000">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h3 style="padding-top:20px">Lorum Ipsum</h3>
                <p class="info-tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
            <div class="col-sm-4">
                <img class="modul" src="img/modul-1.png">
            </div>
        </div>
    </div>
</div>
    
<div class="info-500">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img class="modul" src="img/modul-2.png">
            </div>
            
            <div class="col-sm-8">
                    <h3 style="padding-top:20px;" class="info-tekst-2"> Lorum Ipsum</h3>
                   <p class="info-tekst-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
        </div>
    </div>
</div>

Hope you can help

Upvotes: 0

Views: 46

Answers (1)

vignesh
vignesh

Reputation: 1011

Problem is to add img-responsive class to img.Please do refer the code below:

<div class="info-1000">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h3 style="padding-top:20px">Lorum Ipsum</h3>
                <p class="info-tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
            <div class="col-sm-4">
                <img class="modul img-responsive" src="img/modul-1.png">
            </div>
        </div>
    </div>
</div>

<div class="info-500">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img class="modul img-responsive" src="img/modul-2.png">
            </div>

            <div class="col-sm-8">
                    <h3 style="padding-top:20px;" class="info-tekst-2"> Lorum Ipsum</h3>
                   <p class="info-tekst-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
        </div>
    </div>
</div>

Upvotes: 4

Related Questions