Responsive and neatly arranged navigation links using Bootstrap 4

Currently undergoing the process of transitioning from Bootstrap 3.3 to 4.1, I find myself faced with two final complications. In Bootstrap 3.3, I had a responsive navbar without branding, where the links were evenly spaced. While I have managed to get my links looking right, they are now clustered in two rows on the far left side. I have tried various solutions including floats and inline displays based on past questions, but nothing seems to align my links to the left. It's worth mentioning that the original CSS setup was not done by me, as my CSS skills are limited.

This pertains to html/rails

<nav class="navbar navbar-expand-sm navbar-light">
        <div class="container">
          <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#main-menu">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <div class="collapse navbar-collapse" id="main-menu">
          <ul class="nav navbar-nav">
            <li class="nav-item"><%= link_to 'Link 1', '#', class: "nav-link" %></li>
            <li class="nav-item"><%= link_to 'Link 2', '#', class: "nav-link" %></li>
            <li class="nav-item"><%= link_to 'Link 3', '#', class: "nav-link" %></li>
          </ul>

        </div>
      </nav>

CSS Code:

#main-menu {
    background: none repeat scroll 0 0 #fff;
    border: medium none;
}

#main-menu ul {

}

#main-menu ul li {

}

#main-menu ul li a {
    padding: 5px 30px;
}

.navbar.navbar-light {
    border: none;
    background: none;
    margin-bottom: 10px;
    width: 100%
}

#main-menu .nav {
    float: left;
    margin: 0 auto;
    @include size(md) {
        width: 795px;
    }
}

https://i.sstatic.net/3hRsK.png

Answer №1

If you'd like to align the links in your navbar to the left, try including the following class in your code:

<div class="collapse navbar-collapse d-flex justify-content-start" id=“main-menu”>...</div>

By adding the d-flex class, Flexbox properties will be applied and using justify-content-start will shift the links to the left side of the navbar. I hope this solution works for you.

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

Changing the appearance of your website on various pages using WordPress: activating unique stylesheets

When connecting my stylesheets to my WordPress theme, I include the following in my customtheme/style.css file: @import url('bootstrap/bootstrap.min.css'); @import url('includes/styles1.css'); @import url('includes/styles2.css&ap ...

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

Unable to select the initial element

Having trouble targeting the first child in this code snippet. I've tried various methods but nothing seems to be working. Any suggestions on how to resolve this? <div id="main"> <div class="page"> <p>random 1</p> </div ...

Simple HTML alignment tool instead of Bootstrap

Are there any other options besides Bootstrap for a predefined CSS library that can help align and customize an HTML page quickly? I have been using ASP.NET and Bootstrap for my development, but I'm looking for something new. If there is another libr ...

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

Arranging Bootstrap 4 columns in a 2-6 alignment

click here for image details <div class="container"> <div class="row"> <div class="col-md-6 d-table float-left" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div> <div class="c ...

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

Remove the outline on a particular input and retain only its border

Even after trying to use "outline: 0", nothing seems to change. #input_field { outline: 0; width: fit-content; margin: auto; margin-top: 20%; border-radius: 30px; border: 2px solid turquoise; padding: 6px; } <div id="input_field"> ...

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

Issue with customizing CSS in Fullcalendar Version 5 for Angular not functioning as expected

Currently, I am integrating Fullcalendar v5 into our Angular project and am looking to customize the Fullcalendar toolbar title color and size. In the styles.scss file, I inserted the following CSS code: .fc .fc-toolbar-title { font-size: 1.2em; color ...

What is the best way to set a jpg image as the background for an HTML div utilizing CSS/Bootstrap?

Struggling to set the background image for the first div in my home_no_user.html (which has an id of "background-image") to use the image yoga-stock.jpg. I've done this before without any issues, but for some reason, it's not working now, and I c ...

Connecting a hero image in CSS for Flask application: a step-by-step guide

Adding a hero image to my Flask app page has been challenging. Here is the directory structure of my Flask project: -static |--css_files |--my.css |--images |--img.jpg -templates |--layout.html In order to incorporate a hero image, I have includ ...

What is the best way to place an anchor so that it is perfectly aligned between a static header and footer?

I am looking to create a website where the content is placed below a fixed header and footer. Navigation is to be done through anchors, with only the active anchor being displayed while the rest remains hidden by the header and footer (similar to a window) ...

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

Using webpack to load the css dependency of a requirejs module

Working with webpack and needing to incorporate libraries designed for requirejs has been smooth sailing so far. However, a bump in the road appeared when one of the libraries introduced a css dependency: define(["css!./stylesheet.css"], function(){ &bsol ...

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

Issue with non-responsive images in Bootstrap 3

Here is the bootstrap configuration that I am currently using: http://www.bootply.com/118172 I'm having an issue with the responsiveness of the image. It's not shrinking to match the height of the div on the left side. Can anyone help me trouble ...

Problem arises with table nth-child selector following the addition of grid-gap

Our current table looks like this: https://i.sstatic.net/eUyBB.png The first row has a background color and the second row is white - which is correct. Now I would like to align the attributes to the right. I added the following code to the table: .table ...

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...