Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

I am struggling to align the brand and dropdown menu on the right with the content of my page. My goal is to have a single column for the content, taking up col-8 on larger devices and col-12 on smaller devices. I want the navbar and footer to always be 100% width (in terms of background color), but the content within the navbar should match the width of the rest of the page. Despite trying different options, I have not been able to achieve this successfully.

When I look at the result of my code, I see that the "Brand" text is not consistently aligned with the "Some text". Similarly, the "X" text is not in line with the design I had in mind. I have attempted to rearrange the row/col/container elements, but it seems that the CSS properties of the "nav" element are inhibiting my desired layout. As a Bootstrap novice, I acknowledge that I may have misunderstood some concepts here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978b978a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="container mx-auto pt-5">
      <div class="row">
        <div class="col-12 col-md-8 mx-auto">
          <nav class="navbar bg-body-tertiary fixed-top">
            <div class="container-fluid">
              <a class="navbar-brand">Brand</a>
              <div class="nav-item dropdown">
                <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      X
                    </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-8 mx-auto">
          <div class="row">
            <div class="card border-light mb-3">
              <div class="card-body">
                <p class="card-text">Some text</p>
              </div>
            </div>

            <footer class="bg-light text-center fixed-bottom">
              <div class="text-center text-secondary p-3">
                Footer
              </div>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Answer №1

There are a few issues that need to be addressed. The fixed-top class used in the navbar makes it position: fixed, causing it to no longer flow with or be relative to other content on the page. If you want the width of the navbar to be relative to the parent column it is contained in, you should remove the fixed-top class. Additionally, the outer row/col elements are unnecessary.

<div class="container">
    <div class="row">
        <!-- navbar -->
        <div class="col-12 col-md-8 mx-auto">
            <nav class="navbar bg-body-tertiary">
                <a class="navbar-brand">Brand</a>
                <div class="nav-item dropdown">
                    <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> X </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-8 mx-auto">
            <!-- BODY WRAPPER -->
            <div class="row">
                <!-- content -->
                <div class="card border-light mb-3">
                    <div class="card-body">
                        <p class="card-text">Some text</p>
                    </div>
                </div>
                <footer class="bg-light text-center fixed-bottom">
                    <div class="text-center text-secondary p-3"> Footer </div>
                </footer>
            </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

Take away the attention from the span element

I have been experimenting with the following jsfiddle and attempted various methods suggested in this Stack Overflow thread, but I am struggling to remove the focus from the "feedback" span after clicking on the cancel button in jQuery confirm dialog. Her ...

javascriptjqueryhtmltippyjs

Steps to troubleshoot the TypeError: cv.Mat is not a constructor in opencv.js issue

Encountering a problem while trying to use opencv.js for detecting aruco markers from my camera. Each time I attempt to utilize the method let image = new cv.imread('img'); An error keeps popping up: TypeError: cv.Mat is not a constructor ...

javascripthtmlopencvvue.js

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

javascriptphpjqueryhtmljson

Is it possible to include a shared helper text for two textfields that have been imported from MUI in a React.js project?

This snippet contains the code for my password container: .password-form-container { width: 85%; height: 7%; position: relative; top: 230px; left: 40px; display: flex; justify-content: space-between; border: 1px solid red; } <div clas ...

htmlcssreactjsmaterial-uiuitextfield

Semi-transparent image

Can I achieve a semi-transparent image? Similar to this gradient: background:linear-gradient(to bottom,rgb(44, 44, 44),rgb(29, 38, 51,0.322)); ...

htmlcss

What is the best way to enlarge the text in an image input field?

One of the input fields I'm working with looks like this: <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button1"/> I am trying to figure out how to enlarge the text Submit on that field using CSS. Any suggestio ...

htmlcssinput

Is it feasible to exclusively apply Twitter Bootstraps .navbar-fix-to-top on mobile devices?

I am working on a website using Twitter Bootstrap 3 and I have implemented the following navbar: <div class="col-xs-12 col-md-10 col-md-offset-1"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> ...

htmlcsstwitter-bootstrap

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables

The mobile devices are not showing my HTML website

I have implemented the following CSS link code on my website: <link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" > Additionally, I have included the following code <meta name="HandheldFriendly" content="True"> & ...

javascriptandroidjqueryhtmlcss

Tips for incorporating background color with CSS pseudo-elements

I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...

cssreactjs

The Bootstrap 4 grid appears to be malfunctioning as the columns are not displaying next to each other as expected

I've implemented the code below in an attempt to achieve the desired layout shown in the image, but instead, I'm getting a different outcome. Can someone help me figure out what I might be doing wrong with the Boostrap 4 grid system? I'm co ...

cssbootstrap-4

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

csswordpresspager

Changing Image Size in Real Time

Trying to figure out the best way to handle this situation - I need to call a static image from an API server that requires height and width parameters for generating the image size. My website is CSS dynamic, adapting to different screen sizes including ...

javascriptjqueryhtmlcss

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

cssangulartypescriptsass

Swap the existing div with a fresh div using jQuery or JavaScript

Seeking a straightforward method to swap out a div with a different div, ensuring cross-browser compatibility with JavaScript or jQuery. Below is a code snippet to demonstrate. The goal is to replace "myDiv-B" with a new div: <div id="myDiv-C">{% in ...

javascriptjqueryhtml

Enhancing design precision from Figma to flawless pixels

I'm facing the challenge of converting a figma design into an HTML and CSS template with a fixed dimension of 1440px. I'm unsure about where to begin coding in terms of screen size - should I start at 1440px and scale down/up, or begin with mobil ...

htmlcssfrontendfigmapixel-perfect

Screen rendering can be a challenging task

As I dive into learning how to use THREE.js for creating browser games, I've encountered a roadblock. Every time I attempt to import a model using the code, the screen just renders black. Surprisingly, I've been smoothly coding and running it in ...

javascripthtmlthree.js

"How can I adjust the positioning of a Materialize modal to be at the top

I am encountering an issue where the modal is being displayed automatically without any trigger when I try to set the top property in the #singlePost. Despite attempting $('#singlePost').css("top", "1%");, it does not seem to work. I have also ex ...

jquerycssmaterialize