Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Creating a responsive layout with nested divs using Bootstrap Check out my HTML code below:

<div class="container-fluid" style="height: 350px;">
    <div class="row-fluid clearfix" style="height: 100%">
        <div class="col-md-9 column" style="height: 100%;">
            <div class="row clearfix" style="height: 50%;">
                <div class="col-md-4 column" style="height: 100%;background-color: red"></div>
                <div class="col-md-4 column" style="height: 100%;background-color: green"></div>
                <div class="col-md-4 column" style="height: 100%;background-color: blue"></div>
            </div>
            <div class="row clearfix" style="height: 50%;">
                <div class="col-md-12 column" style="height: 100%;background-color: pink"></div>
            </div>
        </div>
        <div class="col-md-3 column" style="height: 100%;background-color: yellow"></div>
    </div>
</div>

Output:


When you increase the browser screen width, the green and blue colored divs seem to be missing.

My expected output:


I would appreciate your assistance in resolving this issue.

htmlcsstwitter-bootstrapresponsive-design

Answer №1

To prevent elements from overlapping, it is important to also define classes for mobile view. One way to do this is by using the following example:

col-xs-12 col-md-4 column

For a live demonstration, check out the bootply here

Answer №2

The solution is working perfectly now, all you need to do is remove the clearfix class from the row. Here is the corrected code:

   <div class="container-fluid" style="height: 350px;">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row-fluid">
    <div class="col-md-9 column">
        <div class="row">
            <div class="col-md-4 column" style="height: 150px;background-color: red">
            </div>
            <div class="col-md-4 column" style="height: 150px; background-color: green">
            </div>
            <div class="col-md-4 column" style="height: 150px; background-color: blue">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 column" style="height: 150px; background-color: pink">
            </div>
        </div>
    </div>
    <div class="col-md-3 column" style="background-color: yellow; height: 300px">
    </div>
</div>
</div>

Answer №3

Ramesh Gupta Hello, I have optimized your code to keep only the essential parts required for functionality.
Give it a try and let me know how it goes.
This revised code aligns the pink block properly with the rest of the elements.

To view the enhanced version, click on this link: Fiddle. It's easier to adjust the size there.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Bootstrap Starter Template</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.space {
  margin-top: 5%;
  margin-bottom: 5%;  
}    
    
.block-a {
  height: 350px;  
}
.block-b {
  height: 175px; 
}    
.block-red {
  height: 175px;
  background-color:#ff1000;  
}
.block-darkgreen {
  height: 175px;   
  background-color: green;  
}
.block-blue {
  height: 175px;   
  background-color: blue;  
}
.block-pink {
  height: 175px;   
  background-color: pink;  
}
.block-darkyellow {
  height: 350px;   
  background-color: gold;
}     
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 space"></div>
    
<div class="container-fluid">
    <div class="row-fluid col-md-9 block-a">
        <div class="col-xs-12 col-sm-12 col-md-4 block-red"></div>
        <div class="col-xs-12 col-sm-12 col-md-4 block-darkgreen"></div>
        <div class="col-xs-12 col-sm-12 col-md-4 block-blue"></div>
        <div class="col-xs-12 col-sm-12 col-md-12 block-pink"></div>
    </div>
    <div class="row-fluid col-md-3 block-a">
        <div class="col-xs-12 col-sm-12 col-md-12 block-darkyellow"></div>
    </div>
</div>    
    
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

Answer №4

It is important to note that the red div will be displayed prominently in this scenario. This is due to the fact that the parent div has a specified height of 50%, and all three child divs have a height of 100% each. Consequently, the red div, being the first one, will occupy the entire height available. To address this issue, a potential solution would involve assigning a height of 33.33% to each of the three divs when a certain breakpoint is reached, like so:

@media(max-width: 767px) {
  .col-md-9 .col-md-4 {
    height: 33.33%;
  }
}

Prior to implementing this adjustment, it may be advisable to assign more specific classes to the respective div elements.

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

Using Python and Selenium to retrieve information from the attribute 'data-label'

https://i.stack.imgur.com/zb7f5.jpg try: details = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "DataTables_Table_5")) ) scores_list = details.find_elements_by_tag_name('tbody') for sco ...

pythonhtmlseleniumwebdriver

Retrieving ng-repeat object in Angular

How can I retrieve the current object from an ng-repeat on ng-click without using $index? The $index method is giving me the wrong index due to my use of orderBy. Ideally, I would like to be able to click on the object (thumbnail) and have $scope.activePer ...

javascripthtmljsonangularjsangularjs-ng-repeat

How to Customize Bootstrap Colors Globally in Angular 4 Using Code

I am interested in developing a dynamic coloring system using Angular. I have set up a service with four predefined strings: success, info, warning, and danger, each assigned default color codes. My goal is to inject this service at the root of my applicat ...

cssangularstyling

Transform Vue.js into static HTML output

Is there a way to convert a Vue.js component into static html without the need for javascript? I am specifically interested in retaining styles. I am searching for a library where I can execute code similar to this: SomeNestedComponent.vue <template> ...

javascripthtmlcssvue.jsnuxt.js

An unexpected error has occurred: Module not found - ui.bootstrap.alert in line 17 of angular.min.js

Check out this snippet of HTML and AngularJS code <html ng-app="myApp"> <head> <title>My Angular App</title> <link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="Scripts/an ...

twitter-bootstrapangularjsangular-ui

Is there a way to use jQuery to load a ul from a different webpage into a div?

Progress is being made as I work on making two nearly identical pages function seamlessly together. One page features an alphabet list, and when a letter is selected, the other page filters results (last names from a PHP database query) and displays them o ...

phpjqueryhtml

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

While working on my project, I encountered a JavaScript error in the console of Chrome. The error message stated "Unexpected token ]" and it was pointing to a specific line of raw HTML code. I am puzzled about what could be causing this issue. Unfortunatel ...

javascriptjqueryhtmlgoogle-chrome

Using jQuery to toggle the visibility of div elements while displaying an indicator

A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...

jquerycssshow-hide

Utilizing checkboxes for toggling the visibility of buttons in Angular

I want to dynamically show or hide buttons based on a checkbox. Here is the HTML code I am using: <input class="form-check-input" [(ngModel)]="switchCase" type="checkbox" id="flexSwitchCheckChecked" (change)=" ...

htmlangulartypescripttwo-way-binding

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

Is there a method to incorporate links or buttons when hovering over a row in a kendo grid? I've searched through the documentation and looked online, but haven't found a solution. I'm considering if I should modify my row template to displa ...

javascripthtmlkendo-ui

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

javascriptjqueryhtml

AngularJS and Bootstrap carousel combined for a dynamic multi-item per slide display

Currently, I am utilizing Bootstrap to showcase a carousel on my website, where multiple items are displayed per slide as demonstrated in this example. The use of static images has yielded satisfactory results, as evidenced by the jsFiddle example found he ...

javascriptcssangularjstwitter-bootstrapcarousel

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Position the final list item in the column on the left side

Currently, I am facing an issue with creating spacing between li elements in a column layout. The problem arises when the last li in the column does not align to the far left edge of the column width. Take a look at the screenshot below for reference: Bel ...

csshtmlwordpress-theminghtml-lists

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l ...

javascriptcssangularjsng-class

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

I am trying to color every <td> element in a row of three columns with the same color using the following code: for (var i = 0; itr < $("td").length; i++) { $("td").eq(i).css("background-color", Colors[i]); } However, this code colors each i ...

javascriptjqueryhtmlhtml-tableconditional-statements

Polymer event / callback for appending new child nodes

My current project involves creating a custom element, let's call it <parent-element>, that performs specific actions based on the presence of its childNodes. When I define the element like this: <parent-element> <div> </div&g ...

javascripthtmlpolymerweb-componentmutation-observers

Displaying divs inline with overlapping child divs

As a beginner in CSS, I tackle the challenges of learning it every day. Despite feeling clumsy and not naturally adept at it, my determination is strong (although sometimes my brain feels like an old computer on the verge of overheating). My current goal i ...

htmlcss

What is the best way to incorporate multiple versions of jQuery on one webpage?

Is it possible to use multiple versions of jQuery on a single page? I need two different versions for various functions, but they seem to be conflicting with each other. If I implement jQuery noconflict, will the product scripts still work? <script typ ...

javascriptjqueryhtml