Sleek design featuring a header, footer, Left Menu, Content, and RightMenu implemented on Bootstrap 4-5

Can you help me create a minimal layout using Bootstrap 4-5 with a header, footer, LeftMenu, Content, and RightMenu?
The combined width of LeftMenu, Content, and RightMenu should be similar to the main block on the current site (htmlforum.io). This means not occupying the entire width of the browser, but being centered instead. Are there any best practices for achieving this kind of layout?
LeftMenu should be aligned with the left edge of the container.
RightMenu should be aligned with the right edge of the container.

For example...

An illustration is provided in the image below:
https://i.sstatic.net/rZPOt.png

I've tried implementing it myself, but everything seems misaligned...

Here's the code:

<!doctype html>
<html lang="ru">
<head>
  <!-- Webpage encoding -->
  <meta charset="utf-8">
  <!-- Viewport settings -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>...</title>

  <!-- Bootstrap CSS (jsDelivr CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7c8d7ca">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
  <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c7768776a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
  <!-- Page content -->  
<div class="container sm ">
<header  class="s-topbar ps-fixed t0 l0 js-top-bar bg-primary text-white">
  <div class="container-fluid p-3">
    HEADER
  </div>
</header>
<section class="position-relative">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xl-4 a1 bg-danger text-white w-3 ">A1</div>
      <div class="col-md-6 col-xl-4 a2 bg-warning text-dark">A2</div>
      <div class="col-md-6 col-xl-4 a3 bg-success text-white">A3</div>      
    </div>
  </div>
</section>
<footer class="fixed-bottom"> 
  <div class="container-fluid p-3 mb-2 bg-dark text-white" >
    FOOTER
  </div>
</footer>
</div>
</body>
</html>

https://jsfiddle.net/User65659/m4svktd8/1/

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

Answer №1

If you're looking to design a simple layout using either Bootstrap 4 or 5, check out this example:

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

This style might be what you're aiming for, but feel free to adjust the height, padding, and other elements as needed.

Check it out here: https://codepen.io/nisoojadhav/full/RwQZERj

.header{
  background-color:#2f2f2f;
color:#fff;
  text-align:center;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.left{
  background-color:#F55353;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.middle{
  background-color:#FEB139;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.right{
 background-color:#00B4D8;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center; 
}

.footer{
  background-color:royalblue;
  text-align:center;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d4c8d6cb84839287d7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header col-12">
  <h1>Header</h1>
</div>
<div class="row">
  <div class="col-3 left">
  <h4>left</h4>
  </div>
    <div class="col-6 middle">
      <h4>middle</h4>
    </div>
  <div class="col-3 right">
    <h4>right</h4>
    </div>
</div>

<div class="footer col-12">
  <h2>Footer</h2>
</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

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...

Can you explain the HTML semantic layout for having multiple titles matched with their respective lists?

In my directional segment, I have included details such as the address, phone number, email, and service date/time. I envision it looking like the example below: https://i.sstatic.net/5h4SM.jpg Currently, my code appears as follows: <div class="co ...

Enhancing your Vue web application with Bootstrap: A guide to customization

Utilizing bootstrap-4 within my Vue web application has been challenging. I am unable to customize it as explained here. My index.html utilizes Bootstrap CDN, as shown below: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

Click to enlarge the text on button press

Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...

In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

The html button adorned with a variety of CSS styles

I've been attempting to create a button for a message system that displays an orange dot when there's a new message, but I'm having trouble getting it to work. Do you think it's possible? Check out the button below: <input type="bu ...

Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wr ...

Transition animation when switching between divs in React -

Currently, I am utilizing react-transition-group to assist in managing transitions between different elements. My goal is to create a quiz where each question slides over the previous one once a user answers it. However, I've encountered an issue with ...

Steps to obtain the precise source code of a webpage

Is there a way to download the exact source code of a webpage? I have tried using the URL method and Jsoup method, but I am not getting the precise data as seen in the actual source code. For example: <input type="image" name="ctl00$dtlAlbums$ct ...

Error: ReactJs unable to find location

I'm attempting to update the status of the current page when it loads... const navigation = \[ { name: "Dashboard", href: "/dashboard", current: false }, { name: "Team", href: "/dashboard/team", current: fa ...

Achieve uniform height for two elements using Material UI

Here is the code snippet I have: <div className="center"> <TextField variant="outlined" className="manualUserFollowTxt" required id="manualUserFollowTxt" label="Username" name="username" autoComplete="username" a ...

Animating a div in jQuery by creating a duplicate

I've spent hours scouring Google and StackOverflow for a solution to this particular issue I'm facing, but haven't been able to find one. Here's the problem: I'm currently in the process of creating a shopping website. When a user ...

Maintaining photo proportions in HTML when using width and height as percentages

Is it possible to specify width and height as percentages in the <img> attributes? It seems that when I attempt to do so, the image resizes but the quality appears skewed. Here is an example of my markup with fixed attributes: <img src="#" widt ...

How can I turn off the responsive font sizes in bootstrap 5?

How can I turn off RFS in Bootstrap 5 easily? I attempted: $font-size-base: 1.6rem; $font-size-lg: $font-size-base; $font-size-sm: $font-size-base; However, it seems like reboot.scss is overriding it. ...

Tips for aligning text box to the right

I am struggling to position a text box on the right side of my webpage in order to display a carousel on the left. I attempted to use the float property, but it doesn't appear to be working as intended. https://i.sstatic.net/cSKDS.png <div cla ...

What could be the reason for a querySelector returning null in a Nextjs/React application even after the document has been fully loaded?

I am currently utilizing the Observer API to track changes. My objective is to locate the div element with the id of plTable, but it keeps returning as null. I initially suspected that this was due to the fact that the document had not finished loading, ...

From JSON object to HTML table: converting structured data into a user

I'm currently facing a challenge when trying to iterate through JSON data retrieved from an API and display it in an HTML table. After parsing the original JSON, I accessed its elements as follows: JSON (data retrieved from API): {"PrekesID" ...

The div element is not adjusting its size according to the content it

Essentially, I want the #main-content div to expand so that its content fits inside without overlapping, as shown in the codepen example. I've been unsuccessful in implementing the clearfix or overflow:hidden solutions so far. It's puzzling why ...