Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides.

The HTML code for the DIV containing the icons is as follows:

<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">
   <div class="bottom-nav navbar-nav" style="height: 100%; margin: 0px auto;">
      <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">
        ICON
      </a>
      <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">
         ICON
      </a>
   </div>
</nav>

I am working with a REACT application and also using Bootstrap. I have tried adding "margin-left: 0" and "margin-right: 0" but it did not solve the issue.

If anyone familiar with Bootstrap can help me achieve this, I would greatly appreciate it. Thank you.

htmlcssreactjsbootstrap-4react-bootstrap

Answer №1

To make your navigation bar full width, simply add a custom class and adjust the CSS properties. Since your navigation bar uses display: flex;, you can utilize justify-content: space-between; to evenly distribute the icons:

.custom-nav {
  justify-content: space-between;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">
  <div class="bottom-nav navbar-nav custom-nav" style="height: 100%; margin: 0px auto;">
    <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">
      <i class="fas fa-star"></i>
    </a>
    <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">
      <i class="fas fa-glass-cheers"></i>
    </a>
    <a href="#restaurant" data-rb-event-key="#restaurant" class="nav-icon fa-2x nav-link">
      <i class="fas fa-utensils"></i>
    </a>
    <a href="#store" data-rb-event-key="#store" class="nav-icon fa-2x nav-link">
      <i class="fas fa-store"></i>
    </a>
  </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

I am looking to dynamically load a script only after retrieving specific data from a JSON file in Next.js

I am trying to ensure that the Script tag loads after the data.post.content is loaded within the HTML. Specifically, my goal is to execute the MathJax.js script inside the HTML. This is the code I have: return ( <div> <h1>{data.post ...

javascriptreactjsnext.jsmathjax

Utilizing Dynamic Dropdown Selected Value in PHP

Help with PHP/HTML: I have added the list of all countries to the add/edit page. However, on the edit page, I need the selected value in the dropdown. Can someone please assist me? <select class="form-control" id="country_list" name="country"> ...

phphtml

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

javascripthtmlcssreactjsmaterial-ui

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Learn how to display separate paragraphs upon clicking a specific item

New to coding and eager to learn, I have recently started exploring HTML, CSS, and basic JavaScript. In my journey to enhance my skills, I am working on building a website for practice. One particular page of the site showcases various articles, each acc ...

javascriptjqueryhtml

What could be causing my HTML form to only accept one response at a time?

While conducting my study, I required a Likert scale and came across a well-designed one at https://codepen.io/Buttonpresser/pen/poXVod However, I encountered an issue where selecting an answer for one question would deselect the answer for a different qu ...

htmlforms

problems arise due to padding and floating on the navigation bar

I have been facing a couple of challenges with my code. Firstly, I am trying to remove the small annoying line underneath my selected navigation links and also attempting to float both the header and footer to the right without losing their backgrounds. I ...

phphtmlcss

Setting a minimum height for bars on a graph can be achieved by adjusting the

I need assistance with my graph display. Currently, the graphs are not showing when the value is less than a certain point. I would like to set a minimum height so that they can be displayed regardless of the value. My graphs are being generated using cha ...

htmlangularjschart.js

Guide to extracting information from a JSON response with the fetch API

Issue trying to display JSON response after API call using fetch. Response visible in Chrome's response tab, but not found in fetch response object. Client side import React from 'react'; import './App.css'; class App extends ...

node.jsreactjsexpress

When you hover the cursor over it, the material-ui icon button shines with an elliptical background effect

There seems to be a strange issue with the IconButton in @material-ui/core/IconButton that is causing a weird elliptical background to appear when hovering over it. https://i.stack.imgur.com/Xof8H.png Even after copying the code directly from the materia ...

cssreactjsmaterial-ui

Include a Footer on the HTML Document

Having an issue with the placement of my footer in a web application. I've managed to generate XML data to render the HTML page and everything displays correctly except for the footer. The footer is supposed to be at the bottom of the page but it&apos ...

c#asp.nethtml

Instructions on keeping a numerical counter at its current value for all site visitors

Recently, I integrated a number counter into my website. However, I am facing an issue where the count resets to zero whenever a new visitor accesses the site. I'd like the count to remain persistent and update based on the previous count. For instanc ...

javascripthtml

Avoiding the Maximum update depth exceeded error in ReactjsWays to prevent

Trying to incorporate CSV content into a ReactJS application using the code below. Upon button click, an API call is made to retrieve the response, which needs to be displayed in table format and saved upon submission. Response retrieval and saving functio ...

reactjs

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Successfully changing the source and tracking of a video through an onclick button, but the video content remains unchanged

I apologize if this post is a duplicate, but I couldn't find the answer in previous threads. I'm attempting to change the video source using an onclick button. However, even after changing the source, the video remains the same. <video width ...

javascripthtmlvideo

What steps can be taken to implement CSS rules on an HTML element with ExtJS?

In my ExtJS 4 project, I am working on drawing an image inside a panel and slider field. My goal is to adjust the opacity of the image based on the value of the slider field. I understand that I can use CSS rules like opacity and filter:alpha(opacity=); t ...

cssextjs4opacity

How do I easily show/hide a submenu in AngularJS with a toggle menu?

After browsing some Stacks, I've come to the realization that I need to create separate directives in order to hide or toggle a menu from its sub-menu items. I want the menu to be hidden when any of the sub-menu items are clicked. However, I can&apo ...

htmlcssangularjshamburger-menu

Delete unnecessary css code

After years of working on a website, it has grown significantly in size. The CSS files have become quite messy and unclear. I need to figure out how to identify which parts of my extensive CSS file are not being utilized on my homepage so that I can safel ...

htmlcsscoding-style

Tips for adjusting alignment in MaterializeWould you like to change the alignment

I have implemented the Materialize framework for my front-end design. Initially, everything looks good when the page loads, but upon returning to the index, there is an alignment issue. Clearing the cookies seems to fix it. Here is how it currently looks: ...

phphtmlcsscodeigniter

Creating a button with multiple background gradients using CSS

When working on a button element that already boasts a gradient effect, my aim was to integrate a small play image directly in the center. However, achieving this without compromising the current layout and ensuring compatibility across various browsers pr ...

htmlcssbuttongradient