Expanding the full width of the bootstrap navbar

Let's cut to the chase - I'm working with Bootstrap 4 and trying to make my navbar fill the entire width (excluding margins). I know this question has been asked before, so I checked out a post here which suggested using the .nav-fill class, but that didn't work for me.

I want my navbar to be centered and take up the full content width with margins on each side. Here's the code I currently have, and I can't seem to crack it.

* {
box-sizing: border-box;
}

body {
background-color: #393939
}



/* -=-=- NAVIGATION BAR -=-=-
*/
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
}

.navlink {
display: inline-block;
color: #C9C9C9;
padding: 10px;
padding-bottom: 10px;
background:
linear-gradient(white, white)
bottom
/100% 0px
no-repeat;
transition: 0.2s all;
}

.navlink:hover {
color: #FFF;
text-decoration: none;
background-size: 100% 4px;
}

.active {
color: #FFF;
}



/* -=-=- SOCIAL MEDIA -=-=-
*/

.social-icon {
float: right;
font-size: 1.5em;
padding: 0;
}
<!DOCTYPE html>
<html>

<head>

<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">

<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">



</head>



<body>

<header>
<nav id="header-nav" class="navbar-nav">
<div class="container d-flex justify-content-center">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--<a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
</div>
</nav>
</header>

<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4a554a4a5f481450497a0b140b0c140a">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>

</html>

Answer №1

Here is an example of a CSS grid container:

<div class="container grid-container">
      <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
      <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
      <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
      <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-container > a {
  text-align: center;
}

Check out this MDBootstrap example for more inspiration!

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

Looking to access files from the Android asset folder within an HTML document?

I'm currently developing an HTML-based app for Android. I've successfully displayed the HTML file using this code: "file:///android_asset/index.html" Now, my goal is to load local image files or fonts within that HTML file from the assets folder ...

What is the best way to delete and add elements in a looped array using Javascript

i have a form similar to this one. https://i.sstatic.net/V7ivb.png how can I replace this form each time the country changes, by removing it and then appending it again from a looping array. If there is only one set of data, display an "Add Form" Button; ...

The unusual behavior of a page refresh in jQuery when replacing content

My website features a flash player. This code references the flash player stored in player_codes.php: <script language="javascript" type="text/javascript" src="songs_related/flashmp3player/swfobject.js" ></script> <!-- Div that contains pl ...

Tips for achieving a static background image while allowing scrolling on a webpage in asp.net

I am struggling to implement this on my website. The background image needs to be fixed while the content of the webpage should scroll in asp.net <head runat="server"> <title></title> <style type="text/css"> body { backgr ...

Strategies for effectively handling browser history in a dynamically loaded JavaScript application

I recently developed a website with two dynamic sidebars - one on the left and one on the right. Both sidebars are configured to load content asynchronously using the .load() function (from leftside.html and rightside.html). The left sidebar contains a m ...

Develop a dynamic webpage using ASP.NET for enhanced interactivity

Currently, I am working with asp.net 2.0 and C#. I have a unique teacher-student dynamic in my platform, where I envision students receiving personalized pop-ups created by their respective teachers upon login. My challenge lies in providing teachers wit ...

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

Troubleshooting Problem with Creating a Button using HTML Checkbox "onclick" Event

My main goal with the checkbox click event is to achieve the following objectives: 1] Create a button with the id = 'id-of-checkbox'+'some-character-here' in a specific div. 2] Clicking on that button will remove both the button and ...

What is the best way to alter an HTML element using Ruby with Sinatra and Bootstrap?

Below is the content of my index.erb file: <a class="btn" href='javascript:TestFunction()' role="button">TestFunction</a> <script language="javascript"> function TestFunction() { $.post("test_function", { action ...

What is the process for making a local storage item accessible to others on a network?

Can a local storage item be accessed from any computer on the network using the same Google Chrome extension that was previously set up? ...

increasing the size of the input field on the lower row of the form

I have a form with two rows of text boxes. The first row contains three text boxes, while the second row should only have one text box that spans 100% of the width. Here is the current code: <div class="row"> <div class="col-md-4"> ...

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

Is there a way to retrieve the previous value in an input field's onChange event?

I am working with inputs in a React project and have assigned a function to their onChange event. While I have been able to access the current value, I am now looking for a way to retrieve the previous value as well. The reason I need the old value is bec ...

The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

Would it be feasible to asynchronously load a column of data in the MUI DataGrid after the table is displayed on the screen? Retrieving this additional data from the database is time-consuming, so I aim to have it appear once the table has fully loaded. T ...

Exploring the possibilities of using rem, em, and px for setting image dimensions

I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to image ...

Utilizing JavaScript to trigger an alert message upon selecting various options and blocking the onclick event

Setting up a simpleCart(js) with selectable options presents a challenge. The task at hand is to display an alert if not all drop-downs meet specific requirements and to prevent the "Add to cart" button from adding items to the cart when these conditions a ...

Using CSS to Showcase Text and Images

Setting up a database for Weapons for Sale and incorporating PHP code: <?php echo '<link rel="stylesheet" href="display.css" type="text/css">'; function FindPhoto($name) { $dir_path = "http://www.chemicalzero.com/FireArms_Bis/Guns ...

Ways to determine the position of elements when they are centered using `margin:auto`

Is there a more efficient way to determine the position of an element that is centered using CSS margin:auto? Take a look at this fiddle: https://jsfiddle.net/vaxobasilidze/jhyfgusn/1/ If you click on the element with the red border, it should alert you ...

Notify when a variable matches the value of a div

I am attempting to display an alert message when my JavaScript var is equal to the value of a div. Here is the code I'm using: function checkMyDiv() { var elementCssClass = document.getElementById("Target"); if (elementCssClass == "hello") ...