Challenge with the Bootstrap 3 grid structure involving nesting

On my .aspx page, I have the code snippet below:

.cDiv {
  background-color: gray;
}

.tColor {
  background-color:yellow;
}

.tColor2 {
  background-color:blue;
}
<div class="container">
<div class="row">
    <div class="col-sm-9 tColor">
        Level 1: .col-sm-9
          <div class="row">
              <div class="col-sm-6 tColor2">
                  Level 2: .col-sm-6
              </div>
              <div class="col-sm-6 cDiv">
                  Level 2: .col-sm-6
              </div>
          </div>
      </div>
  </div>
</div>

The issue arises when the second column exceeds the width of its parent element. This leads to the following output:

https://i.sstatic.net/mKKGD.png

Answer №1

It seems like you may have overlooked including the bootstrap css file.

.cDiv {
  background-color: gray;
}

.tColor {
  background-color:yellow;
}

.tColor2 {
  background-color:blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
    <div class="col-sm-9 tColor">
        Level 1: .col-sm-9
          <div class="row">
              <div class="col-sm-6 tColor2">
                  Level 2: .col-sm-6
              </div>
              <div class="col-sm-6 cDiv">
                  Level 2: .col-sm-6
              </div>
          </div>
      </div>
  </div>
</div>

Check out the Demo

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

SVG: spin the entire text

I need assistance rotating a list of words at an angle, specifically tilting only the characters: Here is my code: <svg width="2000" height="130"> <g *ngFor="let fruit of fruits"> <g> <text [attr.x]="fruit.x" ...

When the window width increases, the image within a flexbox causes the flexbox to break

I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom. I've experimented with using flex-shrink and flex-basis, but it's n ...

Firefox experiencing issues with loading background images

The website URL: 4genderjustice.org While this layout functions properly in most browsers, notably Firefox seems to be causing issues. The question remains: why is it not functioning as expected in Firefox? The background images are configured like so: ...

CSS - Issues with transition smoothness on Safari

I am facing an issue with a simple font-size transition in Safari, causing stuttering while it works smoothly in Chrome and Firefox. I'm not sure if this is a Safari problem, a Webkit issue, or something else entirely. Any workaround suggestions would ...

Two-column dropdowns without the use of tables

I am looking to create a drop-down menu with the following structure: | Heading ---------------- action | Item action | Item action | Item action | Item The action could represent "Change" and Item could be something like "Users". To maintain ...

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. https://i.sstatic.net/VNPDP.jpg For example, the first button appears normal and the second one turns blue after clicking. However, this background effec ...

As you scroll, a box blocks off half of the screen

Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it. It's like a social media platform where users enter the site and the is_user_logged_in parameter ...

Basic media query does not affect div resizing or font changes in Chrome or Internet Explorer

I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

I recently completed a website and designed an awesome navigation bar in a separate file. However, when I combined them together, the navigation bar disappeared. The background of my "list" div should be filled in and larger, but it's not working as e ...

Organizing pictures by category

I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...

parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should ...

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

What is the method for tallying CSS page breaks in printed HTML documents?

Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

Challenges with uploading files using jQuery

Click here to upload a file I'm trying to create a feature where users can choose an image and have it displayed in place of the "trees" image. Feeling stuck, I could really use some guidance. Check out the code below: <div class="user-editab ...