Creating a dynamic layout by combining Flexbox CSS and Bootstrap for optimal responsiveness

After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below.

Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts below the main content section. My goal is to reorganize it as shown in the screenshots below.

Here is the initial view:

https://i.sstatic.net/4XVfh.png

This is how I envision it:

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

For mobile phone display, it should look like this:

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

During testing, the wide view will be condensed, and I aim for it to transition to the mobile view where the top sidebar moves above the main content, matching its width. The bottom sidebar should do the same at the lower end.

While it's simple to place both sidebars at the bottom, I prefer exploring the option of splitting them up.

For experimentation, I'm employing flexbox, CSS3, and Bootstrap 5+ without any plugins or JavaScript.

csstwitter-bootstrapflexboxbootstrap-5

Answer №1

Method 1: To achieve the desired layout, you can utilize CSS float feature along with float-end and float-start bootstrap classes. Here's a reference guide for your convenience: ref:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
  <div class="float-sm-end   col-sm-4 col-12 h-25  bg-secondary">Sidebar Top</div>
  <div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
  <div class="float-sm-end   col-sm-4 col-12 h-25  bg-info">Sidebar bottom</div>
</div>


Switch to Full page view and resize your browser width below 576px to observe the responsive design in action.
In this example, I have utilized the small breakpoint col-sm-*, but you can explore different breakpoints to cater to various devices.

The boostrap v5.1.3 CSS file primarily contains d-*-grid rules with other features being experimental.

Method 2: Another approach is using flexbox properties like order and wrap. It is an enhanced version based on @Rana's solution:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
  <div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
  <div class="order-sm-2 order-1 col-sm-4 col-12 h-25  bg-secondary">Sidebar Top</div>
  <div class="order-sm-3 order-3 col-sm-4 col-12 h-25  bg-info">Sidebar bottom</div>
</div>

Answer №2

If you're looking to achieve a specific layout, consider utilizing Bootstrap's Flex order utility.

Take a look at: https://getbootstrap.com/docs/5.0/utilities/flex/#order

Feel free to share a code snippet of what you've attempted so far. While the Flex Order utility may help, potential issues could arise depending on your HTML structure.

For this type of layout, my suggestion would be duplicating the top column for mobile and desktop views, then using the d- utility to show or hide the appropriate one:

<div class="container">
    
    <div class="row ">
      
      <div class="col-12 d-md-none d-block">
        <div class="box box-1">sidebar top col (only for mobile)</div>
      </div>
      
      <div class="col-md-8">
        <div class="box box-2">main col</div>
      </div>
      
      <div class="col-md-4">
        <div class="box box-3 d-none d-md-block">sidebar top col (only for desktop)</div>
        <div class="box box-4">sidebar bottom col</div>
      </div>
      
      
    </div>
  </div>

Check out an example here: https://jsbin.com/yidokokewu/1/edit?html,css,output

Alternatively, if you're using Bootstrap 5, explore CSS Grid as well. Bootstrap 5 offers handy utilities for grid layouts: https://getbootstrap.com/docs/5.1/layout/css-grid/

If avoiding duplicate HTML for different devices is a priority, CSS Grid for layout might be the ideal solution - despite its learning curve, it's definitely worth experimenting with.

Answer №3

If you're looking to explore different CSS properties, consider the following:

flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;

As your screen size changes, adjust these values as shown in the snippet below:

.container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  background-color: lightgray;
}

.containerBox {
  width: 50%;
}

.containerBox1 {
  background-color: lightgreen;
  order: 2;
}

.containerBox2 {
  background-color: yellow;
  order: 1;
}

.containerBox3 {
  background-color: lightblue;
  order: 3;
}

@media screen and (max-width: 700px) {
  .container {
    background-color: grey;
    flex-wrap: nowrap;
  }
  .containerBox {
    width: 100%;
  }
  .containerBox1 {
    order: 1;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container vh-100 vw-100">
  <div class="containerBox containerBox1 h-25">Sidebar Top</div>
  <div class="containerBox containerBox2 h-100">Content</div>
  <div class="containerBox containerBox3 h-25">Sidebar bottom</div>
</div>

Answer №4

It is recommended to use float-start for the left column and float-end for the right column as the optimal solution. Avoid using col-12 and col-sm-* solely for defining column widths. Refrain from adding the row class to the parent div to prevent columns from behaving like flex items. Additionally, the clearfix class on the parent div is necessary to avoid overlap with subsequent elements.

For more information on float: https://getbootstrap.com/docs/5.1/utilities/float/ More details on clear-fix: https://getbootstrap.com/docs/5.1/helpers/clearfix/

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7a7c626b236c65616a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="clearfix">
    <div class="col-12 col-sm-4 float-end bg-secondary">Sidebar Top Area</div> 
    <div class="col-12 col-sm-8 float-start bg-primary">Content<br>Some Text<br>Some Text</div>
    <div class="col-12 col-sm-4 float-end bg-success">Sidebar Bottom Area</div> 
</div>

Answer №5

visit here for Bootstrap grid examples or check this link for more information

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4ebf4e8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7c7c6978483d2639263a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">     
  <div class="container-fluid">     
    <div class="row">
      <div class="col-12 col-sm-9 bg-success">col-12 col-sm-9</div>
      <div class="col-12 col-sm-3 bg-warning">col-12 col-sm-3</div>
    </div>
  </div>
</div>

</body>
</html>

Answer №6

.main-content {
  background-color: #faaa03;
  height: 500px;
}
.top-sidebar {
  background-color: #ccd0d5;
}
.bottom-sidebar {
  background-color: #99d2f2;
}
.row-design {
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row-design clearfix d-flex flex-wrap d-lg-block">
    <div class="col-12 col-md-8 col-lg-8 main-content order-2 float-lg-start">Main Content Area</div>
    <div class="col-12 col-md-2 col-lg-4 top-sidebar order-1 float-lg-end">Top Sidebar Area</div>
    <div class="col-12 col-md-2 col-lg-4 bottom-sidebar order-3 float-lg-end">Bottom Sidebar Area</div>
  </div>
</div>

Feel free to test this out!

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

implement a dropdown feature for a vertical menu with the help of Jquery

Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...

javascriptjqueryhtmlcssdrop-down-menu

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

htmlcsswordpresstagscategories

Craft a search bar inspired by Google's iconic design using CSS styling

I need to recreate a custom input styled like the Google Material Theme design. This is the desired outcome: https://i.stack.imgur.com/QU5dp.png While I am aware that frameworks/libraries can achieve this, it is part of my assignment to create it from s ...

htmlcssmaterial-design

Using CSS on a randomly selected div that is chosen after dividing the main div each time it is clicked

Imagine a square box displayed as a "div" element. When you click on it, it splits into an n x n grid with each square having a random background color. However, the issue I am encountering is that I want to apply additional CSS to each of these randomly c ...

javascriptjqueryhtmlcss

Struggling with aligning mat-icon in the center using HTML and CSS?

My issue is that the mat-icon in my generated columns is not center aligned. What could be causing this? When using ngFor to generate my datatable columns dynamically, none of them align correctly. The mat-icon inside my DIV defaults to left alignment. ...

htmlcssangularngx-bootstrapngx-datatable

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enable the text to wrap around an interactive object that the user can freely manipulate

Looking for a solution where I can have a floating div that can be moved up and down using javascript while the text wraps around it seamlessly. Similar to how an object positioned in a word document behaves, I want the text to flow around the div both ab ...

javascripthtmlcsscss-float

CSS background property does not function properly if the URL contains brackets

Here is the URL for an image I am working with: URL: Currently, I am having an issue in my CSS: background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg) The problem arises due to the presence of ...

cssruby-on-railssass

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

rearranging the positioning of links in the HTML navbar

Is there a way to prevent other links in the navbar from moving up slightly when hovering over one link and creating a line (border bottom)? ` .n24{ margin-top: 2px; padding: 14px 14px; } .n25{ margin-top: 2px; padding: 14px 14px; } . ...

htmlcss

``There seems to be a malfunction with the modal feature in the asp.net

Within my strongly typed view, I have a loop that iterates over a list of objects fetched from a database. Each object is displayed within a jumbotron element, accompanied by a button labeled "Had role before". When this button is clicked, a modal opens wh ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

Looking to replace a background image using javascript?

(apologies for any language mistakes) I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamical ...

javascriptcssbackground-image

What is the best way to combine a navbar with a video background?

Recently, I delved into Bootstrap and attempted to execute a code for a navbar with a video background. This is what my attempt looked like: HTML Code: <html> <head> <title>Medical</title> <meta charset="UTF-8&qu ...

htmlcssbootstrap-4backgroundnav

I'm experimenting with crafting a new color scheme using MUI, which will dynamically alter the background color of my card based on the API

I am attempting to create a function that will change the colors based on the type of Pokemon. However, I'm not sure how to go about it. Any suggestions or ideas!? Check out where I'm brainstorming this logic [This is where the color palette sh ...

javascriptcssreactjsmaterial-uistyled-components

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Can one retrieve the CSS/XPath from a Capybara Element?

Is it possible to extract CSS/XPath from a Capybara Element? I have attempted to use #path but it doesn't appear to be effective. Here is the link I tried: The test is being executed on Selenium Webdriver. ...

cssxpathcapybara

What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it. <link rel="stylesheet" href="test.css" ...

htmlcssforms

Issue with content overlapping when hamburger icon is tapped on mobile device

When the hamburger menu is pressed on smaller screens, I want my navbar to cover the entire screen. To achieve this, I included the .push class in my code (see the jQuery and CSS) to trigger when the .navbar-toggle-icon is pushed. However, after implemen ...

javascriptjqueryhtmlcsstwitter-bootstrap