Refashioned: The Bootstrap design shifter concept

Hi there! I am currently working on implementing a layout shifter pattern with Bootstrap 4.

So far, I have successfully positioned 2 colored boxes responsively, but I am facing some challenges with getting the third box in the right place.

If you have any tips or suggestions on how I can achieve this, please let me know. Below is the HTML code I am working with:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Layout Shifter</title>
  <link href="bootstrap.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <!-- navbar -->
  <nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Layout Shifter</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-12 col-md-2">
        <div class="blue"></div>
      </div>
      <div class="col-12 col-md-10">
        <div class="red"></div>
      </div>
      <div class="col-12 col-md-10">
          <div class="purple"></div>
      </div>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    crossorigin="anonymous"></script>
</body>

</html>

And here is the CSS code I am using:

.blue{
    width:100%;height:1100px;
    background-color:rgb(88, 88, 211);
}
.red{
    width:100%;height:550px;
    background-color:rgb(216, 90, 90);
}
.purple{
    width:100%;height:550px;
    background-color:rgb(168, 68, 214);
}
.orange{
    width:100%;height:550px;
    background-color:rgb(212, 135, 46);
}
.light-blue{
    width:100%;height:550px;
    background-color:rgb(160, 168, 238);
}
.container-fluid{
    padding:0;
}
.img-fluid{
    width:100%;
}
.bg-light{
    background-color: #384f3f !important;
}
.navbar-brand{
    color: white !important;
}
.nav-link{
    color: white !important;
}
.img-responsive{
    max-height:550px; 
    width:100%;
}
.navbar-toggler{
    color:white !important;
    border-color:white !important;
}

Answer №1

Bootstrap utilizes a 12-grid column system. The issue with your code is that you had a 2-width column + a 10-width column + another 10-width column, causing the third one to be pushed down. To achieve the desired layout, you should split the row into a 2-width and a 10-width column, and under the second column, insert a new row with two 10-width columns set to "col-md-12" to occupy the remaining space. Here is the link to the jsfiddle with the code you need: https://jsfiddle.net/Iulius90/t7vhza3g/1/


<div class="container-fluid">
<div class="row no-gutters">
  <div class="col-12 col-md-2">
    <div class="blue"></div>
  </div>
  <div class="col-12 col-md-10">
    <div class="row no-gutters">
      <div class="col-12 col-md-12">
        <div class="red"></div>
      </div>
      <div class="col-12 col-md-12">
        <div class="purple"></div>
      </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

Display two columns side by side using Bootstrap on all screen sizes

I'm attempting to have two column divisions appear on the same line. Take a look at my code: <div class="col-md-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Left Division </div> ...

The initial item on the list, displayed on the right side in Google Chrome

Currently experiencing an issue with Google Chrome where the first list item's bullet is floating right while all other list items' bullets are aligned correctly at left. Here is the code snippet causing the problem: <div class="window_sub_ ...

Clickable functionality disabled for form elements

I am encountering an issue with my system development task. The form elements appear to be unclickable, preventing any data entry in the fields. I have attempted moving the form tag above the first div in the code structure below as a troubleshooting step, ...

Steps to resolve transition zoom issues with images

I'm having trouble showcasing blog posts with an image. Currently, I am utilizing card-columns from Bootstrap 4, and when the user hovers over the image, it scales up. The issue arises when the transition occurs, as my border radius resets to defaul ...

The PNG image keeps getting cropped

The bottom of a PNG image is being cropped off. View the picture illustrating the issue .loadMoreBtn-label { background-image: url(picture); background-repeat: no-repeat; padding-left: 30px; background-size: 23px 23px; background-posit ...

Responsive menu is failing to respond to the click event

I'm facing an issue with my responsive menu on mobile phones. It should display two buttons - one for the navigation bar and the other to toggle the side bar by removing the classes hidden-xs and hidden-sm. However, I am having trouble getting the btn ...

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

Tips for creating a dashed border line that animates in a clockwise direction when hovering

I currently have a dashed border around my div element: .dash_border{ border: dashed; stroke: 2px; margin:20px; } My goal is to make the dashed lines move clockwise when my pointer hovers over the div element and stop moving ...

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page. https://i.sstatic.net/coOaU.png I also need to overlay a Font Awesome icon on top of the image as shown below: https://i.sstatic.net/nbrLk.png https://i.sst ...

What is the best way to insert an image into an HTML card?

I'm a beginner in PHP and I'm working on creating a registration form that should have a design similar to the picture linked below: https://i.sstatic.net/7P7bn.png However, the form I've created so far looks like this: https://i.sstatic. ...

The height of the sidebar must be set to 100% in order to fully cover the

Take a look at the examples below. // Content removed .aside { position: relative; float: left; width: 195px; top: 0px; bottom: 0px; background-color: #ebddca; height: 100%; } Currently, I'm still searching for the right ...

Static list elements are utilized in the CSS drop-down menu

It may appear that my coding skills are lacking or incorrect. When I attempt to create a drop-down menu in CSS, the new list elements end up on the other side of the page instead of within the container box. How can this be fixed? Below is the code snippe ...

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated. $(window ...

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

The functionality to move forward and backward in Modal Bootsrap seems to be malfunctioning

I am in need of assistance as I have encountered a major issue that has halted my work progress for several days. My goal is to implement a feature that allows users to navigate between different days both forwards and backwards. While the functionality it ...

Is it possible to vertically resize just one of three divs to match the size of the window?

I'm facing a challenge in creating a responsive webpage with multiple divs. Here is the structure I am trying to achieve: <div id="container"> maximum width of 1200 and height of 1000 <div id="vertically-static-top">20 pixels high< ...

Transition the background image color smoothly from left to right in a seamless and continuous movement

A switch button located in the top right corner can toggle between light and dark modes. The background features a zoomed-in image. Currently, the transition is as follows: From left to right when switched to dark mode From right to left when switched to ...

When viewing HTML "Div" on smaller screens, the full height may not be displayed properly

My setup includes two monitors: one is 24" and the other is my laptop's 12.5" screen. I have a red box (div) in my web application that displays full height on the larger monitor, but only partially on the smaller one. I'm puzzled as to why it s ...

Adjust the element based on hover over the pseudo element

Looking to modify an element based on the hover state of a pseudo-element. Here's what I've tried so far, but it isn't working as expected: nav .logo { display: none; } nav:before{} nav:hover:before .logo { display: block; } I want th ...

Title padding extends beyond the boundaries of the div container

I have encountered an issue with the padding of the title being outside the div. To see the problem, check out my jsfiddle: http://jsfiddle.net/h8Guf/ <!-- HTML --> <div> <h2><a href="#">This is a test text</a></h2> ...