Tips for centering the bootstrap navbar on a page

Utilizing bootstrap, I have designed the following navbar:

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

This navbar was created using the code snippet below (Bootstrap version 3.3.5):

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://www.someone.com/">Home</a>
            </div>    
            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
                </ul>
            </div>
        </div> 
    </nav>
</body>

However, my goal is to center this navbar on the page like the image below:

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

To achieve this, I need guidance on how to apply additional css styling.

htmlcsstwitter-bootstrap

Answer №1

To implement this, consider the following approach:

I have included a new class called navbar-content in the second line.

<nav class="navbar navbar-default">
  <div class="container-fluid navbar-content">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.someone.com/">Home</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
      </ul>
    </div>
  </div>
</nav>

Add the CSS below to your stylesheet for proper styling.

.navbar-content {
  display: flex;
  justify-content: center;
}

Answer №2

Use the property margin: 0 auto; on the navbar class for center alignment.

.navbar {
width: 600px;
margin: 0 auto;
}
<nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://example.com/">Home</a>
                    <a class="navbar-brand" href="http://example.com/">User</a>
                    <a class="navbar-brand" href="http://example.com/">About</a>
            </div>    
            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
                </ul>
            </div>
        </div> 
    </nav>

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

Unable to modify the background image of a div using jQuery

I'm encountering an issue in my script where I tried to implement an event that changes the background-image of a div when a button is clicked, but it's not functioning as intended. Below is the code snippet: HTML <div class="col-md-2 image ...

javascripthtmljquerycss

Automated email formatting for a polished presentation

Aspiring to create automated emails upon user registration on my website, the aesthetic appeal of these emails is crucial to me. I have meticulously crafted an email template using HTML. You can view a snapshot here: https://i.sstatic.net/MpjfP.png Howev ...

htmlcssemail

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

htmlcssfirefox

Customizing the color of text in the fillText() function on an HTML5 <canvas>

I need help changing the color of each line of text in my canvas messages. I've tried creating variables for them, but haven't had any success. Any assistance would be greatly appreciated. function initialize(){ var elem = document.getElemen ...

javascripthtmlhtml5-canvas

HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS? I have a series of continuous text enclosed within p tags only, structured as follows: <div id="needtowrap"> <p>Lorem ipsum dolor sit amet, ...&l ...

htmlcsstext

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

I have a page in angular where I am loading data in the ngOnInit function. The data loads correctly and is displayed on the page, everything seems to be working fine. However, I am encountering numerous javascript errors in the console stating cannot read ...

javascripthtmlasp.netangularconsole

Customizing Bootstrap CSS

In my recent code, I included a bootstrap css reference in this manner: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T ...

htmlcssbootstrap-4

Adjust the loading bar component in Material UI to allow for customizable color changes

I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...

javascriptcssreactjsreduxmaterial-ui

Every time I click, the click event is getting attached repeatedly through the on method

Here is the HTML code that I am working with: <div class="connect"> <ul> <li><a href="#">Assign a Task</a></li> <li><a attr="viewCard" href="#">View Ca ...

javascriptjqueryhtml

Tips for creating a Calculator with AngularJS

I am encountering issues while trying to develop a calculator using AngularJS. Below is the HTML code I have written: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-com ...

javascripthtmlangularjs

Error while retrieving reference from mongoDB in NodeJS

I am currently working on a small website that needs to query my local mongodb. Everything works perfectly fine on localhost. That's why I decided to begin with NodeJS. While all JavaScript functions work seamlessly when run separately, I encounter a ...

javascripthtmlnode.jsmongodb

Is it not possible to update the innerHTML stored in a variable in real-time?

I am attempting to link a div's text with a variable that changes its value based on different button clicks (using plain JavaScript), but I am struggling to update the inner HTML dynamically. It only displays the initial value set on page load. What ...

javascripthtmlcss

Having issues with AJAX and button submit while trying to upload a file using Flask

I've been attempting to incorporate a file upload feature (specifically a .csv file) using bootstrap, and then submit it by clicking on a button. I've experimented with various methods to implement the file upload functionality, but haven't ...

javascripthtmlajaxflask

Implementing nested popup windows using Bootstrap

I am facing an issue with my two-page sign-in and sign-up setup in the header of my angular2 project. On the sign-up page, I have a link that should redirect to the sign-in page when clicked, but I am struggling to make it work. Can someone provide guidanc ...

javascripthtmltwitter-bootstrapangular

JQuery Mobile: Styling does not apply to dynamically populated Select elements

I've been struggling to apply jQuery Mobile styles to a select element that is dynamically filled. Even after attempting to add themes, manual styles, refreshing, $('.ui-page-active').trigger('create');, and more, I still can' ...

cssjquery-mobile

Tips for creating a clickable title that directs to a URL

I am currently using the "Import All" WordPress plugin to bring in an Excel file containing numerous hyperlinks that point to specific Custom Post Types and a designated field. These hyperlinks are separated by commas from the corresponding title. For exam ...

phphtmljquerycsswordpress

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

I have successfully created a popup box using angular in my project. It appears when I click on an icon and disappears when I click on the close button. However, I would like it to also close if someone clicks outside of the popup. Can anyone help me with ...

javascriptcssangularjsangularjs-scopeng-show

Issue with the footer not remaining at the bottom of the page

I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead ...

htmlcss

Attempting to zoom in when hovering over the circular image causes it to spill out of the container

Can someone help me figure out why my circular image isn't zooming when hovered? I've tried adding CSS properties, but the image keeps overflowing the container. What am I missing here? See the code snippet below. .col-lg-4.col-md-6.p-4{ ove ...

htmlcssimagebootstrap-4

The panel's fullscreen feature crashes when exiting after triggering the 'resize' function

I'm facing an issue with a popup window that automatically goes into fullscreen mode. There are two buttons - one to exit fullscreen and another to simply close the window. When the window is in fullscreen, the exit button works perfectly. However, i ...

javascriptjqueryhtmlresize