Issue with alignment of sidebar and main content in Bootstrap design

I'm currently in the process of transforming an existing website (and making it responsive) with the help of Bootstrap (4.3.1) - all while teaching myself how to use Bootstrap effectively.

  • Firstly, there's a top navigation bar
  • followed by the middle section which includes:
    • a sidebar on the left side
    • and the main content on the right side
  • Then, at the bottom we have the footer.

Despite my efforts (I've spent 2 days going through Bootstrap examples and browsing Stack Overflow), I can't seem to get the middle section to match the same width as, and align properly with, the header - without resorting to excessive amounts of CSS.

I'm hopeful that there is an easier way to achieve this. What might I be missing or doing wrong?

Here is the code I am using (inline code/colors are just for reference):

 Sample Code Here

PS - The reason behind this design choice is that I need the middle section to span the full width, as some pages contain images at the top-right corner that should align perfectly with the right edge of the header. Additionally, the sidebar features full-width images with minimal padding.

cssbootstrap-4

Answer №1

To organize your website, wrap each section in a separate row and assign grid columns to the inner divs using col. Here's an example:

<div id="homePage" class="container">
    <header class="row">
        <nav class="col navbar sticky-top navbar-light bg-light">
            <a class="navbar-brand" href="#">Sticky top</a>
        </nav>
    </header>
    <div class="row">
        <div class="col-1" style="background-color:yellow;">
            Sidebar
        </div>
        <!-- Content on the right-hand side -->
        <div class="col-11" style="background-color:green;">
            MAIN PAGE CONTENT
            <p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
        </div>
    </div>
    <footer class="row">
        <nav class="col navbar sticky-top navbar-light bg-light" color="blue">
            <a class="navbar-brand" href="#">Footer at bottom of page</a>
        </nav>
    </footer>
</div>

Answer №2

Increase the width of the center section by adding width:100%. This will expand the div to fill up 100% of its container's width, which is equal to the headers width.

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

Incorporating an additional table dynamically based on height considerations – can you provide visuals as guidance?

The visual representation of my question far surpasses my verbal explanation. My intention is to insert a new table once the height of the previous table exceeds a specific HEIGHT limit, not a certain number of rows. This project does not involve creat ...

javascriptphpjquerycssasp.net

aligning columns within a flexible element that has a maximum height

Within this flex element, I have set flex: column wrap; and max-height: 150px;. The issue I'm facing is that justify-content doesn't seem to be working. However, when I switch to using height: 150px, the alignment works fine. This problem arises ...

htmlcssflexbox

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

What is causing this absolute list item to stray away from its parent container?

Why is the ul element taking up the full width of the wrapper element when the container div is its parent? How can this be adjusted? Here is the HTML structure: Wrapper | container | label | input | ul | botton Here is the ...

htmlcsspositiondisplay

activating a button following the selection of a checkbox

My code includes a submit button that is currently disabled. I am looking to enable it when the user clicks on the "I agree" checkbox using jQuery. Can someone assist me with this? My code is written in HTML, JavaScript, and jQuery. <input id="agree" ...

javascriptjqueryhtmlcss

How to position Angular Material menu on the right side

I'm currently working with Angular Material and I have a navigation bar (shown below). I've placed a md-menu inside the nav bar in order to create a dropdown menu on the right side, similar to Bootstrap's navigation bar. How can I relocate t ...

cssangularjstwitter-bootstrapangular-material

How can I prevent anchors from performing any action when clicked in React?

My dilemma involves this HTML element: <a href onClick={() => fields.push()}>Add Email</a> The purpose of the href attribute is to apply Bootstrap styles for link styling (color, cursor). The issue arises when clicking on the element caus ...

javascripttwitter-bootstrapreactjsbootstrap-4

Resolving Div Alignment Issues in Internet Explorer with jQuery CSS AddClass and RemoveClass

I've set up an HTML table with a hover highlight feature using jQuery and CSS. Here's how my hover event is structured: $('#' + element.id + ' tr:not(:first,[class="summary_row"])').die('mouseover mouseout').live(&a ...

jqueryhtmlcssinternet-explorer-9

Numerous CSS/JS Dropdown Menus

I am seeking the ability to implement a dropdown through CSS in various locations within my HTML prototype. This implies that I require the capability to position multiple dropdowns anywhere on the page. Currently, I utilize this method to generate a sing ...

javascripthtmlcss

Aligning the title vertically in Ionic on Android device

Currently, I am in the process of developing an application using the Ionic framework and cordova. After uploading my app for testing purposes, I encountered a small issue. The title in the top bar on Android appears to be misaligned vertically. Is there a ...

androidcssangularjscordovaionic-framework

Is it possible that the font-family attribute is not passed down to the input fields within a

Do the html form input elements like text fields or select boxes automatically inherit the font-family property from the body? For instance: body { font-family: 'Lucida Casual', 'Comic Sans MS'; } The above font will not be applied t ...

htmlcssformsfontsinput

Styling the content area to fill the entire window in CSS will

<div id="content"> </div> #content{ height:100%; z-index:2; position:relative; top:40px } The content within this DIV is positioned 40px from the top of the page and will scroll under a navigation bar that is 40px high. I am trying to figur ...

css

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

Troubleshooting a CSS problem with iPad browsers

I have a specific issue related to CSS on iPad. I am working with a set of sublinks and have defined the styles in CSS as follows: #leftNav .searchBySub {...} #leftNav a.searchBySub:hover {...} #leftNav .searchBySubClicked {...} In my JavaScr ...

javascriptjquerycssipadmobile-safari

Can we keep a portion of the input placeholder content?

The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...

htmlcssbootstrap-4

Creating a dynamic dropdown menu using jQuery animation

I am looking to add animation to my top navigation bar. Currently, the dropdown menus just appear suddenly when hovering over the links in the top nav. Development site: I have attempted the following: <script> jQuery(document).ready(function() { ...

jqueryhtmlcssjquery-animate

Creating a dynamic Bootstrap card body with an image using Vue.js and integrating it with Firestore cloud DB and a local image source

I'm in the process of developing a compact Vue js page named AddItem.vue which will store the following data. data (){ dish_name: null, dish_description: null, dish_type: null, dish_image: null } The plan is to have a boo ...

vue.jsbootstrap-4google-cloud-firestoreaxios

Explain the concept of grid layout in CSS

Can you please clarify the distinctions between grid and liquid layouts? Specifically, I am interested in understanding the concept of a grid layout. Thank you in advance for your explanation. ...

css

Can you control the order of rendering for specific divs in a ReactJS application?

I need assistance with developing a mobile app using ReactJS and react bootstrap that can dynamically resize itself based on the screen size. One specific part of the app requires calculations to determine its dimensions based on the remaining space on the ...

cssreactjsreact-bootstrap

The Reason Behind Angular Error when Using CSS Custom Tags

I have the following SCSS code: main{ width: 100%; height: 840px; /*background: red;*/ margin: 10px auto; position: relative; padding: 5px 0; } section{ width: 98%; height: 600px; margin: auto; display: flex; ...

htmlcssangular