Utilize Twitter Bootstrap 4 to organize menu items in neat rows

I would like my menu to be structured in rows rather than wrapping and breaking to the next line when there is no more space.

For instance:

https://i.sstatic.net/dInTx.png

Currently, it looks like this:

https://i.sstatic.net/QkVS6.png

Even changing to display: inline doesn't make a difference.

<div class="container">


<nav class="navbar navbar-dark bg-inverse">

  <span class="">Menu</span>

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    +
  </button>


  <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

    <ul class="nav navbar-nav os_menu">
      <li class="nav-item active">
        <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Screening & Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Synopsis</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">The Protagonist</a>
      </li>
    </ul>

  </div>
</nav>

</div>

https://jsfiddle.net/clankill3r/gguc1nub/

csstwitter-bootstraptwitter-bootstrap-4

Answer №1

  .nav.navbar-nav .nav-item {
    float: none;
  }
  .nav.navbar-nav .nav-item+.nav-item {
    margin-left: 0;
  }
  .nav.navbar-nav .nav-link {
    padding: .25rem 0;
  }
  .nav.os_menu {
    border-top: 3px solid rgba(255, 255, 255, .5);

  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">


<nav class="navbar navbar-dark bg-inverse">

  <span class="">Menu</span>

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    +
  </button>


  <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

    <ul class="nav navbar-nav os_menu">
      <li class="nav-item active">
        <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Screening & Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Synopsis</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">The Protagonist</a>
      </li>
    </ul>

  </div>
</nav>

</div>

jsFiddle

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

"Positioning an image at the center with Bootstrap

I've been attempting to center an image on my webpage above the footer, but all my efforts have failed. Here is the HTML code I've been using: <div class="center-block"> <img alt="footer" title="footer" class="image-footer" src="./i ...

csshtmltwitter-bootstrap-3

Changing the border color of a Material UI textbox is overriding the default style

Upon the initial page load, I expected the border color of the text box to be red. However, it appeared grey instead. I tried setting the border color to red for all classes but the issue persisted. Even after making changes, the border color remained unch ...

javascripthtmlcssreactjsmaterial-ui

Blue outlined React Select dropdown with search functionality

When the dropdown is searchable, there seems to be a blue outline around the cursor: Link to image To remove the cursor, you can use this CSS: .Select-input > input { color: transparent; } Is there a way to also eliminate the blue outline on f ...

cssreactjssassreact-select

Can you explain the functionality of dismissing a Bootstrap alert?

In this example, we can see how Bootstrap handles dismissible alerts: <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidde ...

javascriptcsstwitter-bootstrap-3

Background with funky Font Awesome colors

Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...

htmlcsstwitter-bootstrapfont-awesome

Can a CSS3 filter be utilized to transform gradient colors into solid colors?

I have an interesting scenario where I am using a -webkit-mask with a radial-gradient to create small dots on a background image. These dots are transparent, allowing the background image to show through. However, each dot has a gradient color within it. ...

csscolorsradial-gradientscss-filterscss-mask

Error: Type Error - 'style' is not defined in the Progress Bar Project

Having recently started learning Javascript, I have been engaging with various tutorials and projects in order to gain familiarity with the language. One particular tutorial that caught my attention is a Progress-Bar tutorial by "dcode" available at this l ...

javascripthtmlcssprogress-bartypeerror

Having trouble displaying image using absolute path in Express

Currently, I am developing a NodeJS application and have encountered an issue with a div element that has a background-image set in an external CSS file. Surprisingly, the CSS file functions perfectly when tested independently, and the background image dis ...

javascripthtmlcssnode.jsexpress

Align elements vertically in flexbox container using Bootstrap 3 on Internet Explorer 10 and 11

Encountering a problem in IE10+11 when trying to vertically center two Bootstrap columns within a row using flexbox. The dynamic content in the columns requires the row to have a minimum height of 65px. However, if the content expands and spans multiple l ...

htmlcsstwitter-bootstrapflexbox

CSS - Curved background image in the top left corner

Currently in the process of creating a website here. There is a postcode search div on the right side, and I am looking to round the top corner of it. I have decided to use images to achieve the rounded corners effect. My requirement is that any method us ...

cssrounded-corners

The elements on the webpage adjust their dimensions accordingly when zooming in or out

I have been facing an issue with the menu width on my webpage. When I zoom in and out, the width of the menu keeps changing. This problem only occurs in browsers other than IE. I have checked for fixed positioning but it appears to be using relative positi ...

htmlcsszoomingpositioning

Can you restrict the selection of text to only the current element?

<div class="container"> <div class="item1">text text text in div element 1</div> <div class="item2">text text text in div element 2</div> </div> Is there a way using HTML nodes, CSS, or JavaScript to restrict the select ...

javascripthtmlcss

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

htmlcss

Is there a way to ensure that the JSON data and the image appear on the same row with some spacing between them?

Trying to display JSON data with images and text side by side but facing issues where the text wraps below the image instead. How can I fix this layout to show text next to the image? Flex-wrap property doesn't seem to work as expected. function for ...

htmlcss

How can I distinguish the search results from the while loop section at the bottom of the page?

One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

phphtmlcssfooter

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

javascripthtmlcssangulartypescript

Numerous inline notations in html code

I need help figuring out how to prevent a hyperlink from opening a new tab by commenting out the HTML code. <a href="<!--http://www.google.com=-->" target="_blank" onclick="javascript:alert('Navigation Prevented')">CLICK HERE FOR GOO ...

javascripthtmlcsscomments

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...

javascripthtmlcss

The CSS "mask" property is experiencing compatibility issues on Google Chrome

Hey there! I've recently developed a unique progress bar component in React that showcases a stunning gradient background. This effect is achieved by utilizing the CSS mask property. While everything runs smoothly on Firefox, I'm facing a slight ...

cssreactjstypescriptgoogle-chrome

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

Trying to truncate long text in a v-autocomplete component using Vuetify 3 and text-overflow: ellipsis, but it's not working. Check out the code below: <div id="app"> <v-app id="inspire"> <v-row align="cen ...

javascriptcssvuetify.jsv-autocomplete