Positioning the navbar in Bootstrap 4

I'm struggling to find a way to position my navbar exactly as I want it. I need the brand name, "Athletics", to stay on the left while the other options stay on the right. I've tried using classes like "navbar-left" and "navbar-right", playing around with the grid system, and tweaking some CSS, but nothing seems to be working. Here is a link to my code: https://jsfiddle.net/mcoulibaly23/9sn2kx58/ I will also include the code below:

<htnl>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <title>Navbar | Athletics </title>       
</head>
<body>

    <nav class= "navbar navbar-expand-lg fixed-top navbar-dark" style="background-color:darkmagenta; font-family:Roboto;">
        <a class="navbar navbar-brand" href="#"> Athletics </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">

                <li class="active"><a class="nav-item nav-link" href="#"> Shop </a></li>
                <li><a class="nav-item nav-link" href="#"> About Us </a></li>
                <li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
                <li><form class="form-inline">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" height="10">
                    <button class="btn bth-outline-success" type="Submit"> Search </button>
                </form></li>
            </ul>
        </div>
   </nav>
</body>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If I understand correctly, you are looking to position the Brand name on the left and the navigation items on the right in the navbar? If so, using the class "justify-content-end" should achieve this.

I have made some slight modifications to your code with comments indicating where the corrections were made:

<!-- HTML5 doctype declaration -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <title>Navbar | Athletics </title>       
</head>
<body>

    <nav class= "navbar navbar-expand-lg fixed-top navbar-dark" style="background-color:darkmagenta; font-family:Roboto;">
        <a class="navbar navbar-brand" href="#"> Athletics </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Add the class justify-content-end to the div below to align nav-items to the right side --> 
        <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
            <ul class="navbar-nav">

                <li class="active"><a class="nav-item nav-link" href="#"> Shop </a></li>
                <li><a class="nav-item nav-link" href="#"> About Us </a></li>
                <li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
                <li><form class="form-inline">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" height="10">
                    <button class="btn bth-outline-success" type="Submit"> Search </button>
                </form></li>

            </ul>


        </div>

    </nav>


</body>

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

Injecting controllers and classes dynamically using AngularJS

I'm currently working on a dynamic widgets list where each widget is defined by its html, class, controller, and name. Some of these parameters may be empty based on the type of widget. These widgets are then loaded dynamically into <li> element ...

javascripthtmlangularjscontrollerwidget

stream a song with a font awesome symbol

Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...

javascripthtmlfont-awesomemp3

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs

Tips for modifying the value and refreshing the array

I retrieve data from $scope.roleinfo = {"QA":[{"White Box Testing":0},{"Black Box Testing":0}],"Development":[{"Server Side":0},{"UI":0},{"Back end":0}]}; Then, I present these values in a table. Now, I need to update the maxcount and create an array w ...

htmlangularjs

Press the list button to reveal an enlarged box

Each item on this list contains a hidden box that should be shown after it is clicked. However, the issue arises when expanding one item causes other items to expand as well. Refer to the image for clarification: Image Link Is there a way to only expand ...

cssflexbox

Hide the first div within the inner div of a section using CSS

I am working on a section that contains multiple nested divs. Within each outer div, there are 3-4 inner divs. My goal is to hide only the first inner div of each outer div while still displaying some text. section div div:nth-child(1){ display: n ...

htmlcss

Guide to automatically inserting text into an html form and submitting it without manual intervention

Currently, I am in the process of a project where my main goal is to design an HTML form for submitting replies. One interesting feature I want to include is an option for users who are feeling lazy to simply click on "auto-generate comment", which will ...

javascriptjqueryhtml

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

Adding a sibling inline can be accomplished by simply using the "+"

$("#sibling").prepend("#sibling2") <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sibling">First sibling</div> <div>Another component</div> <div id="sibling2">Seco ...

jqueryhtmlcss

Extract a specific pattern from a string using Javascript

Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...

javascripthtml

Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside <pre><code></code></pre> tags to be colorized using CSS. Here's a sampl ...

javascriptjqueryhtmlcss

Issue with Inline forms in Ruby on Rails/HTML: The 'checked' attribute with the value of 'false' is

Desired Setting: I am trying to set the default option for this form to be "No" (or false), however, when I set it as such, my application loads with no option selected. When I use :check => true, the default option selected becomes "Yes" (or true). I ...

htmlcssruby-on-rails

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

I am attempting to configure a Next.js TypeScript app to work with Sass and a font in Next.js. I have been following the steps outlined in this article. Without the font module, styles are working correctly. Below is my next.config.js without the font co ...

csstypescriptsass

Tips for configuring the navigation links on the current page using Bootstrap

In my Angular application, I have set up navigation links for home, about, notifications, and logout. However, when I click on the home link, it redirects me to the login page instead of remaining on the current page. I need the functionality to stay on ...

htmlangulartwitter-bootstrapbootstrap-4angular-ui-bootstrap

Loading dynamic images in HTML using Javascript and Django templates

Attempting to load a specific image using javascript within a django template has presented challenges due to the formatting of django tags. The standard django static asset source in an img tag looks like this: {% load static %} <img src="{% static & ...

javascriptpythonhtmldjango

The slide experiences overflow as it continuously slides up and down

Hey everyone, I've been working on creating a slider effect when a button is clicked. Details about a specific part appear in a designated div upon button click. However, I've encountered a bug where, if I click quickly on different slides, the c ...

javascriptjqueryhtml

From Button to Picture Button

Having an issue with my dropdown menu. After selecting a location, clicking on the "go" button should direct me to another page. Here is the HTML code for the button: <input type="button" name="button" class="gobutton" onclick="openDir(this.form);"> ...

htmlimagebutton

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

javascriptjqueryhtmlcssresponsive-design

The clash between jQuery UI and Bootstrap themes

I am encountering an issue where the text on my Bootstrap-styled buttons is not appearing on my webpage. After some investigation, I discovered that certain lines in the jQuery UI theme file are causing this problem: .ui-widget input, .ui-widget select, . ...

cssjquery-uitwitter-bootstrap