Search code examples
htmlcsstwitter-bootstrapuser-experience

Bootstrap center div stays in long rectangle

I have already created this basic web page that has a header with an image and words, then below that header I have 3 blocks of text, I have one last thing to add which is another block of text below the 3 others. This block needs to be centered and extend downward instead of sideways when the text is long.

See layout example. enter image description here

Here is a live example with lots of text.

Here is my current code

<div class="container-fluid">
        <div class="row text-left">
            <p>Having trouble viewing this email? <a href="<%=HttpContext.Current.Request.Url.AbsoluteUri %>">View in browser</a></p>
        </div>
    </div>

    <div class="container-fluid page-header">
        <div class="row text-center">
            <div class="col-xs-12">
                <img src="http://ssiclouddev.azurewebsites.net/Content/Images/Icons/favicon-96x96.png" />
                <h1>Susquehanna Software Inc.</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-xs-12 col-md-4">
                <h3>From:  <% =Request.QueryString["From"] %></h3>
            </div>
            <div class="col-xs-12 col-md-4">
                <h3>Email: <% =Request.QueryString["FromEmail"] %></h3>
            </div>
            <div class="col-xs-12 col-md-4">
                <h3>Subject: <% =Request.QueryString["FromSubject"] %></h3>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-xs-12">
                <div class="col-xs-6">
                    <h3><% =Request.QueryString["Content"] %></h3>
                </div>
            </div>

        </div>
    </div>
Solution

  • Replace 

     <div class="col-xs-12">
      <div class="col-xs-6">
          <h3><% =Request.QueryString["Content"] %></h3>
      </div>
 </div>

    With

    <div class="col-xs-6 col-xs-offset-3">  
        <h3><% =Request.QueryString["Content"] %></h3>
</div>