What is the best way to center a Bootstrap Navbar and set a fixed width that is neither responsive nor static?

I just started working on my webpage school project and I've managed to create a Navbar that looks decent. However, I want to resize it to be centered and have a specific width. Can anyone guide me on how to achieve this?

Thank you! 

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Find My Band</title>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="">Find Your Band</a>
        </div>

        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="">Find Band</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Our Team</a></li>
          </ul>
        </div>
      </div>
  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
htmlcssbootstrap-4widthnavbar

Answer №1

To customize your navigation bar, apply the width css style to the .navbar selector. To center it, you can utilize margin: auto:

.navbar {
  width: 70%;    /* Adjust the width as needed */
  margin: auto;
}
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Find My Band</title>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="">Find Your Band</a>
        </div>

        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="">Find Band</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Our Team</a></li>
          </ul>
        </div>
      </div>
  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 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

Tips on positioning the text next to the image

You have created an HTML page with an article, but the spacing between the image and text is missing in the displayed image. I need the text to be positioned beside the image to give it a unique shape. Here is the HTML code: /* Start content Article . ...

htmlcss

Exploring the functionality of AngularJS routing on a webpage

Testing the routing functionality of AngularJS while creating a web page. The index.html will contain links to Home, Courses, and Students. Clicking on each link will load its respective HTML using AngularJS routing. The student information is stored in ...

javascriptphphtmlmysqlangularjs

Display a label upon hovering over an image

Is there a way to create an effect where upon hovering over an image, a pop-up image is displayed like this: https://i.sstatic.net/OloUH.png Any suggestions on how I can achieve this using HTML and CSS? Thanks in advance! ...

htmlcss

The Bootstrap model popup darkens the screen, but there are a few areas that remain at the same level of brightness and do not get dim

https://i.sstatic.net/09QtK.png Within my Angular 7 project, I have implemented a Bootstrap modal. However, I am facing an issue where only components with position: relative are darkened when the modal is opened. Some components have position: fixed, as ...

cssangularbootstrap-4

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

I'm having trouble getting the burger menu to look and function the way I want in Bootstrap using CSS and HTML

Currently involved in a school project focusing on creating responsive web design. We have achieved almost all of our group's objectives, but I am facing one last hurdle that I am hoping the wonderful community at Stack Overflow can assist me with. I ...

htmlcssbootstrap-5

Angular CSS: Customizing expansion panels to align items at the top regardless of their current status

I am currently working on creating my own expansion panel using Angular. I want to replicate the behavior of the Angular Material Expansion Panel, but it does not fully meet my requirements. My custom expansion panel consists of 3 main elements: a starti ...

cssangular

Aligning an element in the middle of an image vertically

Trying to vertically center a div inside an image element has been challenging. While there are many ways to achieve vertical centering in general, this specific case presents unique difficulties. To accomplish this, the following minimum code is needed: ...

htmlcss

difficulty obtaining today's date

Currently, I am facing an issue with displaying the current date in an input field for the user: <input id="uploadformData" ng-model="upload.date" type="date" value="<?php echo date('Y-m-d'); ?>" /> The problem arises when the input ...

javascriptjqueryhtmlangularjs

What is the best method for generating a vertical tab using JavaScript in a paragraph format?

Struggling to create a menu similar to this using bootstrap 4. Despite my efforts, I keep encountering various issues. Is there someone who can help me solve this problem? Remember, I am using bootstrap 4. Here is a demo: <!doctype html> <html ...

javascripthtmlcssresponsive-designbootstrap-4

The background image does not fully extend across the entire space

I am struggling to find the solution to a simple issue on my website, michelleforboe.com. The background image in a div is not covering the entire space as intended. I have tried using calc to set the height of the div, but it seems to be slightly off. A ...

cssparallax

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

I have successfully developed an HTML5 video player with subtitles. Currently, my goal is to allow the user to submit the subtitle text at a specific timestamp to a database. Despite trying various methods, I am facing challenges in fetching the subtitle t ...

javascriptjqueryhtml

Ensure that the floating divs are positioned at the bottom of their parent element

Encountering a common issue in a particular scenario... Attempting to automatically adjust the height of floating divs to ensure they reach the bottom of their parent. For instance: http://jsfiddle.net/k95nK/1/ The objective is for all floating columns to ...

cssheightabsolute

The height property in the CSS is causing the parent element to break and cannot be confined

Here is the HTML code that I am currently working with: <div id="div1"> <p id = "a"> <! -- content --> </p> <p id='b'> <! -- content --> </p> </div> Additionally, th ...

cssheight

Guide to creating a dynamic illumination using CSS, HTML, and JS

Can you help me create a unique lighting effect for a specific section of my webpage? I'm curious about the techniques needed to achieve a similar effect as seen on another webpage. Is it feasible to create this effect using only CSS and HTML, or are ...

htmlcsslighting

Preventing the stacking of numerous animations triggered by jquery events

Hey there! I'm currently working on a webpage and utilizing the Transit library for 3D rotations and other CSS transformations. On this page, I have three links that are set to scale up by 1.2 times when hovered over. Everything seems to be working we ...

jqueryhtmlcssanimation

elements of bootstrap overlapping one another

I have created a website using Bootstrap, which can be accessed at this link. The homepage is experiencing alignment issues, with sections colliding with each other. To prevent this collision, I had to add margin-top like the example below: ...

htmlcssbootstrap-4sections

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

The Element fails to go back to its original position due to CSS Float

After changing the screen resolution, it appears that the nav-search-ul element fails to return to its correct position. It seems like the media query is not working properly. This issue only occurs in Chrome, as everything works fine in Firefox and IE. ...

htmlcss