Steps for building a dynamic layout using bootstrap 4

Question

Steps for building a dynamic layout using bootstrap 4

I've been working on creating a responsive layout similar to the image using Bootstrap 4, but I'm encountering some issues. Specifically, I'm having trouble making the sidebar and bottom bar fixed, as well as adjusting the size of the bottom bar. Additionally, I need both the main content and sidebar to have individual overflow scrolling.

fixed top nav bar >done
fixed side bar
fixed bottom bar > done
bottom bar size should be same as main body

Expected output https://i.sstatic.net/DCvob.png

Here is my progress so far:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <title>Document</title>
</head>
<style>
  html,
  body {
    height: 100%;
  }
</style>

<body>
  <!-- Top Nav Bar -->
  <nav class="navbar  navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">logo</a>
    
    

    
  </nav>

  <!-- Main Body -->
  <div class="container-fluid h-100" >
    <div class="row h-100">

      <!-- Left Body -->
      <div class="col-sm-10" style="background-color: #F0F2F5;">
        <div class="container-fluid" style="margin-top:80px">
            <h1>some text</h1>
            <h1>some more text</h1>
            
        </div>
      </div>

      <!-- Side Nav Bar -->
      <div class="col-sm-2 border" style="margin-top:55px;" >
        <h5>list</h5>
        <hr>
        <h1>some text</h1>
        
      </div>

    </div>
  </div>

  <!-- Bottom Player -->
  <nav class="navbar fixed-bottom navbar-dark bg-dark" >
    <div class="container" style="width: 50%;height: 40px;">


    </div>
  </nav>


</body>

</html>

html css layout bootstrap-4

Answer 1

Answer №1

Could you kindly review the code provided below? We have made some adjustments to enhance its functionality. The inline styling has been removed from all elements. Specifically, we added a style to the sidebar element .sidebar-content by setting it as position: fixed; and adjusting its position according to your requirements. Additionally, we applied a style to the .content-main element, making it scrollable content with padding customized to suit your needs. We also set the width of the .footer (bottom bar) to match that of the .content-main (main body).

Please refer to this link for more details: https://jsfiddle.net/yudizsolutions/14ybmh92/7/

body {
    background-color: #F0F2F5;
  }
  main { 
    padding: 56px 0;
  }
  nav.header{ 
      z-index: 1060;
  }
.row .sidebar-content{
    
    position: fixed;
    right:0;
    bottom:0;  
    overflow: auto;
    overflow-x: hidden;
    height: calc(100% - 56px);
    z-index: 1050;
    background-color: #fff;
}
.content-main{
   
    height:calc(100vh - 112px);
    overflow-y: scroll;
}
.footer{ 
    max-width: calc(100% - 16.666667%);
}

@media (max-width:767px)

/* for mobile */
  {
  .sidebar-content {
    position: unset;
    height: 100%;
    z-index: 100;
    background-color: #fff;
  }


}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Document</title>
  </head>
  <style>
    html,
    body {
      height: 100%;
    }

  </style>

  <body>
    <!-- Top Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">logo</a>
    </nav>
    <main>
      <!-- main body-->
      <div class="container-fluid h-100">
        <div class="row h-100">

          <!-- left body-->
          <div class="col-sm-10 content-main">
            <div class="container-fluid">
              <h1>some text</h1>
              ...
            </div>
          </div>

           <!-- side nav bar-->
          <div class="col-sm-2 border sidebar-content" style="margin-top:55px;">
            <h5>list</h5>
            <hr>
            <h1>some text</h1>
             ...
          </div>

        </div>
      </div>
    </main>

    <!-- bottom player-->
    <nav class="navbar fixed-bottom navbar-dark bg-dark">
      <div class="container" style="width: 50%;height: 40px"></div>
    </nav>


  </body>

</html>

Answer 2

Could you kindly review the code provided below? We have made some adjustments to enhance its functionality. The inline styling has been removed from all elements. Specifically, we added a style to the sidebar element .sidebar-content by setting it as position: fixed; and adjusting its position according to your requirements. Additionally, we applied a style to the .content-main element, making it scrollable content with padding customized to suit your needs. We also set the width of the .footer (bottom bar) to match that of the .content-main (main body).

Please refer to this link for more details: https://jsfiddle.net/yudizsolutions/14ybmh92/7/

body {
    background-color: #F0F2F5;
  }
  main { 
    padding: 56px 0;
  }
  nav.header{ 
      z-index: 1060;
  }
.row .sidebar-content{
    
    position: fixed;
    right:0;
    bottom:0;  
    overflow: auto;
    overflow-x: hidden;
    height: calc(100% - 56px);
    z-index: 1050;
    background-color: #fff;
}
.content-main{
   
    height:calc(100vh - 112px);
    overflow-y: scroll;
}
.footer{ 
    max-width: calc(100% - 16.666667%);
}

@media (max-width:767px)

/* for mobile */
  {
  .sidebar-content {
    position: unset;
    height: 100%;
    z-index: 100;
    background-color: #fff;
  }


}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Document</title>
  </head>
  <style>
    html,
    body {
      height: 100%;
    }

  </style>

  <body>
    <!-- Top Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">logo</a>
    </nav>
    <main>
      <!-- main body-->
      <div class="container-fluid h-100">
        <div class="row h-100">

          <!-- left body-->
          <div class="col-sm-10 content-main">
            <div class="container-fluid">
              <h1>some text</h1>
              ...
            </div>
          </div>

           <!-- side nav bar-->
          <div class="col-sm-2 border sidebar-content" style="margin-top:55px;">
            <h5>list</h5>
            <hr>
            <h1>some text</h1>
             ...
          </div>

        </div>
      </div>
    </main>

    <!-- bottom player-->
    <nav class="navbar fixed-bottom navbar-dark bg-dark">
      <div class="container" style="width: 50%;height: 40px"></div>
    </nav>


  </body>

</html>

Steps for building a dynamic layout using bootstrap 4

Answer №1

Similar questions

Aligning the email form to the center with the text-align center property:

Dynamically create a button using jQuery and JSON based on specific conditions (either true or false)

Issues arise when attempting to insert data into an HTML file using PHP

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Personalize the breakpoints of Bootstrap 4's grid system

What is the best way to navigate to a specific element using jQuery?

Which is better for parsing HTML - CSS or XPath selectors?

What is the best way to align these Iframes in the center?

Associating data with controller upon click event

How can I write a click event for an image within a PNG using jQuery?

Instructions for connecting a button and an input field

Set the height of CSS3 to 100% full

Building a floating video player using React

Flexbox mystery: How come the entire div isn't displayed when the element below it is hidden?

Basic event listener function, functional in CodePen but not operating in Chrome web browser

Unable to adjust layout when code is functioning alongside background-color

Is the default animation duration of Compass being ignored?

Place the cursor at the conclusion of the text box

Arrange list items dynamically using ajax