How to keep a centered div in a lengthy box using Bootstrap

After successfully creating a simple web page with a header containing both an image and text, followed by three blocks of content below it, the final addition I need to make is another block of text beneath the existing three. This new block should be centered and expand downwards as needed when the text is lengthy.

To see an example layout, click here.

For a live example showcasing extensive text, visit this link.

Here's the existing code snippet:

<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 №1

Modify the following code:

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

to this:

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

Answer №2

In HTML, it is not recommended to nest col- classes within another col- class without a new row:

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

When dealing with CSS, make sure to allow long words to break and wrap onto the next line:

h3 {
  word-wrap: break-word;
}

Answer №3

Your example appears to be working correctly. However, the issue arises when the content is one long word that extends beyond its parent element. You can solve this problem by adding the CSS rule word-wrap:break-word to the h3 element.

https://i.sstatic.net/7U6Go.jpg

In future, I recommend using dummy text from sources like Ipsum Lorem or Bacon Ipsum for testing purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increasing Taxes and Boosting the Overall Cost

How can we set up a system where taxes are bypassed by default unless otherwise specified when placing an order? Let's take a look at the following text box: <input class="txt1" type="text" name="subtotal" value="" id="subtotal" size="16" ta ...

Looking to temporarily hide a transparent div while the page is loading, and then reveal it once the page has finished loading?

Hey, I've created a code for a transparent div that I'm using behind some text on the homepage of a website to make the text more prominent: #transdiv { position:absolute; top:228px; width:852px; height:160px; background-colo ...

Pause animation when hovering over their current positions

I am working on a project with two separate divs, each containing a circle and a smiley face. The innercircle1 div is currently rotating with a predefined animation. My goal is to create an effect where hovering over the innercircle1 div will pause its rot ...

Tips for setting the correct width for a DIV in Internet Explorer 8

I'm facing a little problem here. I'm trying to make a DIV 434 pixels wide in IE8, but for some reason it keeps getting rendered as 414 pixels. Can anyone tell me why it's cutting off 20 pixels? <html> <head> <style type= ...

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

How can I set up a cycling image background for the main div and a floating menu?

I was wondering how I could keep a cycling image background stationary behind the main content while scrolling through the page. You can check out the project itself by following this link. Feel free to use any of the code, including the fixed header menu, ...

Issue with Jquery change event not functioning as expected

My webpage consists of the following HTML code: <form id="fileuploadform"> <input type="file" id="fileupload" name="fileupload" /> </form> Accompanied by this snippet of jQuery code: $(':file').change(function(){ var ...

Lisp and HTML Scraping: A Powerful Combination

Looking for some guidance related to web scraping in Common Lisp, specifically in extracting data from a webpage. I am utilizing drakma for sending the http request and chtml for scraping the data. The webpage I am targeting is . Here's a snippet of t ...

Unable to provide feedback on the input elements

ISSUE: Unable to provide input in the input fields // Enable dragging for the DIV element: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementB ...

Raising css properties using jquery

Is there a way to adjust CSS values using jQuery? I am looking to specifically increase values like top and left, but my current attempt is not producing the desired outcome: var left = 5; $(.object).css("left" + 5); The challenge I am facing is that I ...

What is the process for designing a dropdown box that showcases text details?

I am in the process of building an FAQ page and I am looking to incorporate a dropdown menu that lists all the frequently asked questions. When a user clicks on a question, I want the corresponding answer to be displayed without redirecting to a new page. ...

Adding an image to your email content using Django

I tried using Django's Email message module to send an email with an embedded image. The image is located in my static folder. I attempted to use HTML code within Python to trigger the email, but the image is not appearing in the email. I have tried s ...

showcasing diverse outcomes

I am currently developing a game and I'm stuck on determining which syntax to utilize. My goal is to input any letter into a text box and have it display a different letter. For example, typing the letter 'a' should result in 'H' b ...

Positioning of buttons within a div

I am currently designing an inspiration post style: https://i.stack.imgur.com/I5J0H.png However, I am encountering some challenges while creating it: The buttons are not rounded when the window size is changed Social icons are not being displayed I am ...

The Line Break <br/> element does not display properly in Java Servlet code

I recently developed a dynamic web application using servlet. The main component is a form on the index.html page that triggers the servlet's doGet method. Check out an excerpt of my code for the doGet Method below. String firstName = request.getParam ...

Tips for displaying live data in the rows of Element UI's Table

Recently, I've been working with a table that looks like this. <v-table :data="data"> <v-table-column prop="data.attribute" label="Attribute"> </v-table-column> </v-table> Instead of displaying data.attribute in the co ...

"How can I adjust the positioning of a Materialize modal to be at the top

I am encountering an issue where the modal is being displayed automatically without any trigger when I try to set the top property in the #singlePost. Despite attempting $('#singlePost').css("top", "1%");, it does not seem to work. I have also ex ...

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

I'm having an issue with my webpage where it doesn't scroll even when the content exceeds the page length. I've tried adjusting the position settings for the body, html, and div elements but haven't seen any changes. Here is the HTML ...

Using jQuery, set a restriction on the total number of options in three dropdown menus to

I am currently facing a challenge with 3 dropdowns, each containing 8 options. My aim is to restrict the total selection across all three dropdowns to 8. For instance, if I choose 7 in the first dropdown, I should only be able to pick 1 in the next two. Si ...