The collapsed Navbar button is noticeably wider than expected

My Bootstrap 4 Navbar has a "Logout" button on the left side that appears too wide when the navbar is collapsed. How can I adjust the size of the "Logout" button when the navbar is collapsed?

<!doctype html>
<html lang="de">

<head>
  <title>Hello World</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="navbar-brand">
      <strong>Navbar</strong>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Test</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Test2</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link btn btn-outline-dark" href="x">Logout<span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>

Any help would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Make sure to place the logout button within a form.form-inline, following the structure detailed in the official Bootstrap documentation. This adjustment will prevent the button from being stretched out.

<!doctype html>
<html lang="de">

<head>
  <title>Hello World</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="navbar-brand">
      <strong>Navbar</strong>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Test</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Test2</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <form class="form-inline">
            <a class="btn btn-outline-dark" href="x">Logout<span class="sr-only">(current)</span></a>
          </form>
        </li>
      </ul>
    </div>
  </nav>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" 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

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempti ...

javascripthtmlcss

Using Jquery to target all elements except for their child elements

I have the following code: <div id="mn"> <span></span> <span> <span></span></span> <span></span> <span> <span></span></span> <span></span> </div& ...

javascriptjqueryhtml

Using JavaScript to modify the width of an element

I have been struggling to increase the width of an element in my HTML using JS, but it's not working correctly. This is crucial for responsive design as the content should scroll when necessary. I attempted to achieve this with the following code, ...

javascriptjqueryhtmlcss

Improving Performance of a Large Unordered List using JavaScript

My website currently features a search box that retrieves images and displays them in a list format. Each image has an associated click event that triggers an overlay on the parent li element when clicked. However, with search results exceeding 300 images ...

javascriptjqueryhtmloptimization

CSS fails to render properly on pages containing multiple query strings

An issue was initially reported by a customer using an IE browser (specific version unknown). I was able to reproduce the problem on my Samsung Galaxy 3 mobile's Chrome browser. The CSS is not being applied to the page when accessing this link with tw ...

javascriptandroidhtmlcss

How can I adjust the spacing between slides in Slick?

Is it possible to achieve a layout like this using the slick slider? +-------+ +-------+ | | | | | +-------+ | +----| |----+ | | +-------+ The issue arises when trying to set margins between the slides ...

javascriptjqueryhtmlcss

Delete the browsing cache in Internet Explorer from an external source

Currently, I am working on developing an ASP.NET application using Visual Studio. However, a persistent issue I am facing is that every time I launch the application, Internet Explorer caches certain CSS and JS files. This forces me to manually clear the c ...

javascriptcssvisual-studio-2010internet-explorer

What is the best way to display a red cross on a button?

Could you please help me add a red cross (font awesome icon) to the button? I attempted to implement the code on JSFiddle. However, I still need: UPDATE Initially, I found Kiranvj's answer suitable for its simplicity and applicability to all r ...

htmlcssbuttonfont-awesomefont-awesome-5

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

Steps to Embed a Link in a Jumbotron's Background Image

I'm facing a challenge with my jumbotron that has a background image. I want to make the image clickable so that it redirects to another page when clicked. I attempted to add an image tag with a src attribute, but it ended up overlaying another image ...

htmlcssbootstrap-4

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

htmlcssreactjsmaterial-ui

Utilizing JQuery to capture user input in a textarea and showcase it in a span element with key press

Is there a way to capture the user's input and display it in a span above the textarea? Specifically, how can I detect when the user presses the enter/return key (keyCode 13) and correctly insert a line break ( ) in the span? $('#InviteMessage ...

htmljquerykeypress

Strangely compressed HTML image

I am facing an issue with using a base64-encoded png retrieved from a server in WebGL. To incorporate the encoded png, I load it into an html Image object. For my specific needs, it is crucial that the png data remains completely lossless, however, I&apos ...

javascripthtmlimagecompressionwebgl

Using jQuery, set a restriction on the total number of options in three dropdown menus to

I am currently facing a challenge with 3 dropdowns, each containing 8 options. My aim is to restrict the total selection across all three dropdowns to 8. For instance, if I choose 7 in the first dropdown, I should only be able to pick 1 in the next two. Si ...

javascriptjqueryhtml

Issue with z-index in Internet Explorer version 7

Currently, I have implemented a drop-down list using jQuery that activates when the user hovers over the main menu. This functionality is working appropriately in all browsers except for IE7 and earlier versions. In an attempt to ensure the drop-down menu ...

htmlcssinternet-explorer-7z-index

find div elements containing a specific classname

I'm seeking assistance in filtering a large number of populated divs with dynamically generated class names. Here is a form that, when an option is selected, should hide all divs that do not contain the selected class name. <p>To refine your s ...

javascriptjqueryhtmlfilter

What is the best way to verify if a value exists within a Flask session using Jinja?

Having an issue in my Flask application where I am unable to check if a specific value, such as the 'name' value, exists in a session. Here is the code snippet: Python: @app.route("/add/<string: name>") def add(name): session["list ...

pythonhtmlflaskjinja2flask-mysql

An upright section embellished with a mirrored image design on both ends

I am currently working on creating a unique div layout that resembles a piece of paper, similar to this imagehttps://i.sstatic.net/mFq3l.png. However, I am looking to make it a vertical design with the random curly edges on the left and right sides like i ...

htmlcssborderborder-image

I am having trouble toggling radio buttons in React

class VoiceSelector extends Component { constructor(props){ this.handleCheck = this.handleCheck.bind(this); } state={ voices : [ {"Voice":"Indian English Female Voice 1"}, {"Voice":&qu ...

javascripthtmlreactjs

AngularJS ngDialog facing a problem with kendo-mobile-switch when using transform: translateX()

Utilizing the kendo-mobile-switch in my AngularJS project has been successful on pages. However, when attempting to incorporate it into an ngDialog modal, a problem arises with the transform: translateX() property. Instead of shifting 27 pixels to the righ ...

javascriptcssangularjskendo-ui