Bailey Miller Bailey Miller - 5 months ago 22
CSS Question

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>

Answer

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>