What could be the reason my Bootstrap 3 row is not extending to the full width of its parent container?

My goal is to create a grid-based modal template using Bootstrap 3. The modal displays correctly with all the content but the styling seems to be incorrect. It appears that the row classes are not filling their parent containers, even though there are no specific styles causing this issue. Refer to this screenshot for visualization - you'll notice that neither the header nor the body rows expand to the width of their container. I've searched through various Stack Overflow posts for solutions, but so far have found no explanation as to why a row wouldn't stretch to its parent's width.

Update:

Here's a link to a JSFiddle. Surprisingly, it seems to work on JSFiddle which indicates that the immediate template isn't the problem. Therefore, I'm now exploring other potential causes for this issue. Thanks for pointing me in the right direction, Calvin!

HTML

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header ht-modal-header">
            <h1>
                <a href="#">Bombay Teen Challenge</a>
            </h1>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <address>
                        1 Chium Village, Ambedkar Road<br/>
                        Bandra West<br/>
                        Mumbai 400052
                    </address>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <abbr>e: </abbr> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e65656a6b786f7c6f644e6c61636c6f777a6b6b606d666f62626b60696b20617c69">[email protected]</a><br/>
                    <abbr>p: </abbr> +91 22 2604 2242
                </div>
            </div>
        </div>
        <div class="modal-body ht-modal-body">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="types">
                        <span class="prevention-label"></span> Prevention, Education, Teen
                    </div>
                    <div class="facebook">
                        <span class="fa fa-facebook-square fa-2x"></span> BombayTeenChallenge
                    </div>
                    <div class="twitter">
                        <span class="fa fa-twitter-square fa-2x"></span> @BombayTC
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="people">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <label>People: </label>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                Dr. Rama R. Rao<br/>
                                Monte Hackney
                            </div>
                        </div>
                    </div>
                    <div class="partners">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <label>Partners: </label>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                None Available
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

LESS

.prevention-label {
  width: 24px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  background-color: #4ECDC4;
}

.ht-modal-header {
  a {
    &:hover, &:focus {
      color: white;
    }
    color: white;
  }

  color: white;
  background: linear-gradient(@ht-teal, darken(@ht-teal, 5%));
  background: -webkit-gradient(@ht-teal, darken(@ht-teal, 5%));
  background: -o-linear-gradient(@ht-teal, darken(@ht-teal, 5%));
  background: -moz-linear-gradient(@ht-teal, darken(@ht-teal, 5%));
}

Answer №1

When nesting rows inside columns, it's important to remember that within a .col-lg-6 .row, the layout restarts at 100% width. To fill this space, you need to use .col-lg-12 within it.

You can utilize the following code snippet:

<div class="col-sm-6">
    <div class="people">
        <div class="row">
            <div class="col-sm-12">
                <label>People: </label>
            </div>
            <div class="col-sm-12">
                Dr. Rama R. Rao<br/>
                Monte Hackney
            </div>
        </div>
    </div>
    <div class="partners">
        <div class="row">
            <div class="col-sm-12">
                <label>Partners: </label>
            </div>
            <div class="col-sm-12">
                None Available
            </div>
        </div>
    </div>
</div>

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

Steps for automatically redirecting to a specific page upon form submission

After submitting the form, typically the server sends the inserted data as an email and redirects you to the Home page. However, I wanted to have control over the redirection after form submission rather than letting the server handle it. To achieve this, ...

Simple steps on incorporating a toggler button to collapse the header using Bootstrap

As a beginner in web development, I am facing challenges adding the collapse toggler to my code. I have tried various methods but have not been successful. Can someone please provide assistance? Below is the code snippet: <body> <div clas ...

Navigating drop down lists using selenium: A step-by-step guide

I have been scouring various websites, including this one, for solutions but so far I haven't had any luck. The website I'm navigating with selenium is coded in HTML4, although I'm not sure if that's relevant, I felt it was worth mentio ...

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...

Error: The number of format specifications in 'msgid' and 'msgstr' does not match. One fatal error was found by msgfmt

I encountered an error with Django-Admin that reads: "Execution of msgfmt failed: /home/djuka/project_app/locale/eng/LC_MESSAGES/django.po:49: number of format specifications in 'msgid' and 'msgstr' does not match. Msgfmt found 1 fatal ...

Require guidance and resolution

<div class="container"> <div class="top-section"> <img id="image1" /> <img id="image2" /> </div> <div class="content"> ... </div> <div class="bottom-section"> ... </div> </div ...

Having trouble with jQuery's .each method not looping through the list items

Have several li's containing true or false questions. Issue is that it is functioning properly for the first li, but not for the subsequent ones. Jquery code: <script> jQuery(document).ready(function() { //Run the each it ...

Expandable tool tip box

I've specified the tooltip's width and height as 100% .tool-tip, .tool-tip.top{ width: 100%; height: 100%; margin-left: -43px; } However, it still fails to expand based on the content within. The issue can be seen here: http://jsfi ...

Adjusting the transparency of a div's background using RGBa

I am currently working on adjusting the background opacity of a div using a jquery ui slider. Allowing users to modify the background color of the div, I am seeking guidance on how to adjust only the alpha parameter of the background while keeping the col ...

Implementing multiple layered audio elements in HTML

On my HTML page, I have a menu list that plays a hover sound when I mouse over each element. However, I noticed that when I quickly hover over all of them, only one or two instances of the sound are played. Is there a way to ensure that all four instance ...

Expandable drop-down menu upon clicking

Having trouble creating a dropdown menu on click? Check out the real site I'm working on: . The menu turns into a single button under 736px width, but it's buggy on mobile devices. When clicked on a phone, it automatically redirects to the last b ...

Unable to display image on HTML page transmitted via socket in Java

After successfully loading my simple HTML in Chrome and seeing it display correctly, I encountered a troubling issue when trying to pass it through a Java socket. Despite only passing bytes through the socket, the image always appears broken. The perplexin ...

Trouble with displaying images in a responsive flex box

I've been trying to make the plant image fit inside the flex boxes with a responsive height and width as the screen size changes, but it doesn't seem to be working. In addition, it's changing the shape of the flex box to accommodate the imag ...

Displaying React components using Bootstrap in the navigation bar

I'm feeling a little stuck here. I'm currently working with React Bootstrap and the Navigation component. One of the routes in my application is the dashboard, which is only accessible after logging in. When a user navigates to the dashboard, I ...

Transfer the address information to the billing address fields

I need assistance with copying the user's address to the billing address fields based on a checkbox value. Currently, when the checkbox is checked, only the last input field value is being copied over to the billing address section. It is crucial that ...

Attempting to adjust the spacing between my <h2> and <ul> tags to be more concise

I'm having trouble reducing the space between my h2 and ul elements. It seems that margins are not effective for ul elements and I can't seem to achieve the desired spacing. Is there a specific trick or technique that can be used to address this ...

Make sure to blur an editable p element using only vanilla JavaScript

Check out this code snippet: <p contenteditable>The most amazing p tag in the world of p tags</p> Here is the corresponding Javascript: var p = document.querySelector('p'); p.addEventListner('keypress', function (e) { ...

A fleeting moment reveals a broken image tag

How can I prevent the broken image tag from briefly appearing when the page loads? Take a look at this example: http://jsfiddle.net/v8DLe/196/ I have already implemented: onerror="this.style.display ='none'" Is there a way to still use the img ...

Unable to initiate script on dynamically appended element

I am facing a similar issue as described in this post: Click event doesn't work on dynamically generated elements , however, the solution provided there did not work for me since the post is a few years old. My problem involves an image carousel that ...

Using Selenium and PhantomJS for web scraping to retrieve information on product details

As a beginner in web scraping with Python, I am currently working on extracting product details from a webpage using Selenium and PhantomJS. However, I am facing a challenge as the page does not display the rendered HTML when I try to access it using "driv ...