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

Question

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.

html css twitter-bootstrap responsive-design

Answer 1

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

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 3

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 4

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 5

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 6

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 7

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.

Answer 8

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.

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

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method to make a String bold when sending it through a messaging service?

JSON failing to show all values sent as a string

Guide on transforming Color to HTML color with .NET Standard 2.0

Failure of event watcher on dynamically updated content

How to use CSS to add a pseudo element to a table and position it outside of the parent's boundaries on the left

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

"Within the node.js framework, the search/query section of the URL appears

Vertical alignment to the top is not possible for Inline-Block divs

Exploring the Application of CSS Styles in Selenium

Hovering over rounded corners is being blocked by transparent areas

The appearance of the page varies when viewed on different computers using the same version of Firefox

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

"Ascend beyond the constraints of fixed measurements with dynamic

How to Override Global CSS in a Freshly Created Angular Component

Tips for changing the dimensions of the canvas?

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Utilize CSS to style Hover effects

Easy fix for 3 circles (images) placed in a row with equal distance between them and perfectly aligned

Using jQuery Datatables with Asp.Net

Is it possible to switch the placement of my sidebar and content?