"Enhance Your Website with Boostrap Inputs and a Stylish

After changing my navbar to a full-width navbar, the width of my input div and ul with icons also changed. I have tried many solutions but am unable to fix the problem. I suspect that using a container to center the content in the navbar may be causing the issue.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<nav class="navbar-nav navbar-expand-sm fixed-top">
  <div class="container">
    <a class="navbar-brand"><img src="path1610.png"></a>
    <div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
      <form class="navbar-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Let's rock!">
          <div class="input-group-append">
            <button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarHidden">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-user fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <span class="fas fa-bell fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-fire fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-cog fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-comments fa-2x">
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

csstwitter-bootstrapbootstrap-4

Answer №1

Recently modified the outer nav class to navbar from navbar-nav, and switched container to container-fluid for full width display.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand"><img src="path1610.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
    </button>
    <div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
      <form class="navbar-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Let's rock!">
          <div class="input-group-append">
            <button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <div class="collapse navbar-collapse" id="navbarHidden">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-user fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <span class="fas fa-bell fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-fire fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-cog fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-comments fa-2x">
                            </span>
          </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

Testing for Compatibility Across Different Web Browsers

What resources do you turn to for testing cross browser compatibility? Lately, I've primarily relied on Chrome developer tools, but they often lack accuracy. I attempted to test some projects using websites that claim to simulate various devices, bu ...

htmlcsscross-browser

What is the best way to position a box in the center using CSS?

I have constructed a container using div and included 4 additional div elements inside: HTML: <div className='main__container'> <div className='item'>Image</div> <div className='item'>N ...

htmlcssreactjs

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

Jade and NodeJS combination: failing to display as intended

For my website, I am using Bootstrap to add style. In the index.jade file, I have included the following code snippet: form.form-inline.pull-right(action='http://localhost:1337/authenticated', method='POST') input.input-small(type=&a ...

node.jstwitter-bootstrappugexpress

Encountering issues with loading tooltips when using Tooltipster alongside ClipboardJS upon clicking

In my project, I am using Bootstrap5, ClipboardJS, JQuery, and Tooltipster. Despite following the initial instructions on the Tooltipster website closely, I am unable to determine what I missed. Here are the two sections, one for the JavaScript scripts an ...

javascripthtmlcssbootstrap-5tooltipster

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

Is there a way for me to position my chat messages on the right side in the chat room?

I have a react chat application and I'm looking to customize the appearance of my messages. Currently, all entries with an orange vertical bar belong to me and are displayed on the left side of the chat room. I would like to move them to the right sid ...

cssreactjs

Activate a side navigation bar in AdminLTE-3

I am using AdminLTE3 as my admin panel in Laravel, but I am facing an issue with the nav-item links not activating when clicked. Even though I have all the required assets for AdminLTE3 and used the starter.html file, the navigation items are not working p ...

phphtmlcssadminlte

I am looking for guidance on aligning the rendering of this page with Bootstrap 4 using Visual Studio

I recently started using visual studio 2019 and bootstrap4 to create a web page for account registration. However, I'm experiencing an issue with the rendering - the input fields are not aligning properly. Here is the code snippet I have been working ...

asp.netbootstrap-4

Is it possible to modify the text alignment of a div based on the dropdown selection

I'm having trouble getting the alignment to work with my dropdown list that styles the font of a div. It's frustrating because I usually find solutions easily on Google, but this time the align feature is really bugging me. <SCRIPT LANGUAGE=" ...

javascriptcss

Deactivate a div based on a Razor variable in ASP.NET MVC4

Is there a secure method to disable a div based on a Razor variable in ASP.NET MVC 4.0? I attempted using a CSS class, but it was easily bypassed with developer tools. .disableddiv { pointer-events: none; opacity: 0.4; } Any advice on how to effectively ...

jquerycssasp.netasp.net-mvcserver-side-validation

Changing the background color completely

Need help with CSS! I have two divs, one with a background color of #000 and the other with a transparent PNG image as the background. I want to override the background color with transparency from the PNG file so that the background doesn't cover th ...

htmlcss

Challenges encountered on Chrome browser when using label:hover along with relative positioning

Currently, I am in the process of creating a price list for a section of a website I'm developing. To make it interactive, I am utilizing checkbox type inputs along with labels so that users can select the services they desire, and the webpage will au ...

cssgoogle-chromehoverpositioningcss-position

Tips for incorporating images as radio buttons

Can anyone assist me in setting up a straightforward enabled/disabled radio button grouping on my form? My idea is to utilize an image of a check mark for the enabled option and an X for disabled. I would like the unselected element to appear grayed out ...

javascriptcsshtml

Square-shaped picture with Bootstrap 4 design

I need help making images of different sizes appear as squares in a preview on my webpage. /* This is the CSS code which sets automatic height: */ .preview-img { width: 100%; height: auto; object-fit: cover; } How can I adjust the image height bas ...

cssimagebootstrap-4image-resizing

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

The div element is refusing to display the background image

I'm struggling to add images as background to a div. When I try inline styling, the background-image appears fine. However, when I attempt to use an external CSS file, the image does not show up. I have carefully checked the link and made sure that t ...

htmlcss

Is there a way in CSS to create a fading trail behind a moving particle?

I have successfully made the particle move around as desired, but now I want to create a fading trail behind it. I'm unsure of how to achieve this effect. Can this be accomplished with CSS alone, or do I need to incorporate jQuery? Check out the dem ...

javascriptjqueryhtmlcss

Display a popup when a label is clicked, and update the popup contents according to the label chosen

Upon clicking any label in the #nav section, a popup is displayed. However, I want the content inside the popup to change depending on which label is clicked. Currently, the different popup content divs will all hide or show based on CSS only, so I believe ...

jquerycss

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, bu ...

htmlcss