CODEWITHSUNDEEP
htmlcsstwitter-bootstrapposition
user3766930
user3766930

Reputation: 5839

how can I center text in my bootstrap webpage?

I'm writing a webpage and so far it looks like this: enter image description here

I would like to have this text in the center of the page. The container with text should be in the middle of the page, but the text inside should not be centered (it should rather be aligned to the left). What am I doing wrong?

My html code is:

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                 <a href="http://www.company.com">
                  <div class="text-center logo">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png">
                        </div>
                 </a> 
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 info general">
                <h3>test sth</h3>
                <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
        </div>


        <div class="row" id="summary">
            <div class="col-lg-12 info">
                <h4>sample header</h4>
                <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
        </div>
</div>
</body>

and the css - besides bootstrap - is as follows: 

<style>
    body {
        padding-top: 70px;
        font-family: "Helvetica Neue","Open Sans",Arial,sans-serif;
        background-color: white;
    }

    .logo img {
        width: 100px;
    }

   .info {
        width:100%;
        max-width: 700px;
        margin:0 auto;

    }

    .general {
        padding: 24px 20px;
    }
</style>

-=====edit:

just a follow up, so far this webpage looks like this:

|                     [LOGO]                     |      
| text text text text text te                    |
| text text text text tex                        |
| text text text text text text                  |
| text text text text                            |

and this is what I want to achieve:

|                     [LOGO]                     |      
|           text text text text text te          |
|           text text text text tex              |
|           text text text text text text        |
|           text text text text                  |

Upvotes: 0

Views: 65

Answers (1)

Hissvard
Hissvard

Reputation: 474

Put general and summary in the same div, give that div a width and center it by using

margin: 0 auto;

Since you're using bootstrap you could also make use of the grid and give the parent div, for example, the classes col-lg-8 and col-lg-offset-2.

Also, slightly offtopic but if you're only gonna give those divs the col-lg-12 class you can avoid that overall since divs are set to display:block by default and thus occupy 100% width already.

Upvotes: 1

Related Questions