Center your logo and position the text to the left in your Bootstrap 5

I am struggling to align my navigation bar with the toggler button on the left and the brand logo in the center, similar to the image provided below:

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

I am having difficulty achieving this layout. Currently, my code displays the button on the far left and the logo on the far right.

CODE

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef1eef3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head;

<body>
  <nav class="navbar navbar-light bg-warning">
    <div class="container-fluid">
      <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="130" height="47" />
      </a>
    </div>
  </nav>
  <!-- Optional JavaScript; choose one of the two! -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6a9b6ab">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <!-- Option 2: Separate Popper and Bootstrap JS -->	
  <!--
             <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99a968b9cb9cbd7c8c9d7cb">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
             <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac5dac7">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

</html>
htmlcssbootstrap-5

Answer №1

The simplest way to center content in Bootstrap is by using the mx-auto class:

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

<head>
  <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="2f4d40405b5c5b5d4e5f6f1a011e011c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-warning">
    <div class="container-fluid">
      <button class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
                </button>
      <a class="navbar-brand mx-auto" href="#">
        <img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="130" height="47" />
      </a>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac5dac7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

To center text or logos on smaller screens, you may need custom CSS to adjust the position of elements with position: relative/absolute. Note that this approach can result in layout issues depending on screen size.

.navbar-toggler {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translate(0, -50%);
}

.container-fluid {
  position: relative;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <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="42202d2d36313630233202776c736c71">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-warning">
    <div class="container-fluid">
      <button class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
                </button>
      <a class="navbar-brand mx-auto" href="#">
        <img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="130" height="47" />
      </a>
    </div>
  </nav>
  <script 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>
</body>

</html>

Answer №2

Make sure to assign a position relative class to the container that holds both the navbar button and the logo. Next, apply position absolute specifically to the navbar button and simply include "m-auto" to the nav-bar-brand container.

<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Bootstrap CSS -->
      <link
         href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e7f8e5">[email protected]</a>/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
         crossorigin="anonymous"
         />
      <title>Hello, world!</title>
   </head>
   <body>
      <nav class="navbar navbar-light bg-warning position-relative">
         <div class="container-fluid">
            <button class="navbar-toggler position-absolute ">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand ml-auto m-auto" href="#">
            <img
               src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg"
               alt=""
               width="130"
               height="47"
               />
            </a>
         </div>
      </nav>
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script
         src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f504f52">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"
         ></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a4a8b5a287f5e9f6f7e9f5">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce3fce1">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
         -->
   </body>
</html>

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

I am unable to zoom in on the picture located in the navigation bar

(https://i.sstatic.net/epWYL.png)](https://i.sstatic.net/OHEq8.png) I am struggling to increase the size of the logo in the navbar, despite trying different values. How can I solve this issue? Although I successfully changed the position of the picture, ...

htmlcsswebbootstrap-4frontend

Creating a personalized input slider: A step-by-step guide

I have a question about how to design a custom input slider with the label inside the field itself. The desired output should look like the screenshot below: https://i.sstatic.net/gE6EJ.png I have successfully created the input field part, but I am stru ...

javascripthtmlcss

Switch up the color of the following-mouse-div in real-time to perfectly complement the color that lies underneath it

I am trying to create a div that changes color based on the complementary color of whatever is underneath the mouse pointer. I want it to follow the mouse and dynamically adjust its color. This functionality is similar to what Gpick does: https://www.you ...

javascriptjquerycss

Incorporating a Menu within a TableCell using Material-UI

I have a desire to incorporate Google's Material UI Menu Item inside a TableCell, following their documentation guidelines here in this illustration: https://i.stack.imgur.com/IffEM.png This is my current method: import React from 'react' ...

javascripthtmlcssreactjsmaterial-ui

Guide to automatically blur the input field and toggle it upon clicking the checkbox using Angular

<input (click)="check()" class="checkbox" type="checkbox"> <input [(ngModel)]="second_month" value="2019-09" type="month" [class.blurred]="isBlurred">> I need the second input(type=month) field to be initially blurred, and only unblur ...

htmlangulartypescriptblur

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs? In simpler terms, is it possible to prevent shadows from being cast on a particular div? Take for example this scenario: http://jsfiddle.net/Cd6fE/ How can I prevent ...

jquerycss

Error code received from OpenStack Identity API GET response

I am an intern student and I have a query. Currently, I am working on bug fixing for an Openstack cloud, JavaScript, and Node.js web application. My task involves resolving toastr.error messages and translating them into different languages. How do I ret ...

javascripthtmljsonnode.jsopenstack

Disable audio playback on tab unfocus using Javascript/HTML

Is there a way to automatically mute a tab or video when it is not in focus? As a beginner, I am unsure how to accomplish this task. The audio source is currently a webm file embedded within a <video> tag. ...

javascripthtmlhtml5-videohtml5-audio

How can I retrieve the value of a <span> element for a MySQL star rating system?

Source: GitHub Dobtco starrr JS plugin Implementing this plugin to allow users to evaluate a company in various categories and store the feedback in a MySQL database. Enhancement: I have customized the javascript file to enable the use of star ratings fo ...

javascriptphphtmlmysqltwitter-bootstrap

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

[QUESTION] Is there a way to make the Menu List disappear when zooming in on a webpage? For example: <-- Normal Page [No Zoom] --> [Logo] Profile Gallery Guestbook <-- Zoom In 120% --> [Logo] Profile Guestbook <-- Zoom In 150% --> ...

javascriptjqueryhtmlcssajax

What causes the unusual behavior of `overflow-x: auto;` when used within a parent element with `flex-direction: row;` styling

I have gone through numerous other queries regarding horizontally scrolling tables, but none seem to address this particular problem. When using a responsive table in the default Blazor Server template of a new project built with Bootstrap 4, the browser ...

cssbootstrap-4flexboxoverflowblazor-server-side

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

phpjavascripthtmlcss

Dynamic Dropdown Menu Using PHP and jQuery

I was trying to implement a tutorial I found on this website for a car-related project, but I encountered an issue. The tutorial was working fine, but I needed to add a 'Go' button to allow users to view the selected car from the drop-down menu. ...

javascriptphpjqueryhtml

What is the best way to customize the appearance of an XML snippet using Greasemonkey?

I am attempting to customize an XML fragment retrieved from a server response using a Greasemonkey script. Take a look at this sample XML fragment from w3schools.com: <note> <to> Tove</to> <from>Jani</from> <heading ...

javascriptcssxmlxsltgreasemonkey

Is it a good practice to whitelist inputs for preg_replace()?

How can whitelisting be implemented for input fields to prevent HTML and XSS injection? It seems like using preg_replace with regular expressions is a good initial step. Are there any other methods worth exploring? ...

phphtmlinputxsswhitelist

Customize hover effects in tailwind css with dynamic values

I am trying to customize the text color on hover based on different category names using tailwind CSS. In my configuration, I have assigned a specific color code for each category like this : tailwind.config.js theme: { extend: { } }, co ...

javascriptcssnext.jshovertailwind-css

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

javascripthtmlcss

Tips for implementing SVG in background images on Internet Explorer

Having a similar issue to the one discussed in this thread. My background images are functioning properly on all browsers except for versions lower than IE10. After reading through that post, I created a background image in SVG format specifically for IE10 ...

htmlcssinternet-explorersvg

What could be the reason for HTML not functioning properly in Bootstrap v5 Popover?

I am facing an issue where the HTML content I'm adding to a Bootstrap v5 popover is not displaying as expected. I have followed the guidelines provided in the documentation, but the results are not what I anticipated. Most of the information available ...

htmltwitter-bootstrapbootstrap-5popover

Tips for successfully passing a Prop using the Emotion CSS function

Passing props through styled() in Emotion is something I'm familiar with. For example: const Container = styled("div")<{ position: string }>` display: flex; flex-direction: ${({ position }) => (position === "top" ? "column" : "row ...

cssstyled-componentsemotion