What is the best way to position the navbar toggle on the right side of the navbar once it has

Looking for help with Bootstrap 4. I want the navbar-toggle to be on the right side of the navbar when collapsed, but it's currently in the middle. I've tried various solutions without success. Any suggestions would be greatly appreciated. Thank you!

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
 <!--jQuery library--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--Latest compiled and minified JavaScript--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light navbar-fixed-top">
<div class="container-fluid">
  <a class="navbar-brand" href="#">AA</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
 
   </span>
</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      
      <li class="nav-item">
        <a class="nav-link" href="#">    Home</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">About me</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">Education</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">Skills</a>
      </li>
   <li class="nav-item">
        <a class="nav-link" href="#">Work</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">Contact Me</a>
      </li>
     
    </ul>
   
  </div>
  </div>
</nav>
</body>
</html>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
 <!--jQuery library--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--Latest compiled and minified JavaScript--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light navbar-fixed-top">
<div class="container-fluid">
  <div class="row w-100 d-block"> 
  <a class="navbar-brand" href="#">BB</a>
  <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
 
   </span>
</button>
  </div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      
      <li class="nav-item">
        <a class="nav-link" href="#">    Page</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">About This Site</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">Background Information</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">Expertise</a>
      </li>
   <li class="nav-item">
        <a class="nav-link" href="#">Experience</a>
      </li>
  <li class="nav-item">
        <a class="nav-link" href="#">Connect With Me</a>
      </li>
     
    </ul>
   
  </div>
  </div>
</nav>
</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

Is it advisable to incorporate the <main> element in my code?

While browsing through w3schools, I came across the <main> element. However, according to caniuse.com, this element is not supported by IE, Opera Mini, and the UC Browser for Android. Should I opt for using a <main> element instead or stick wi ...

htmlprogram-entry-point

I am looking to display the <AddProduct /> element within the main-content div of a different component called Dashboard

import { useState,useEffect } from 'react'; import './App.css'; import Header from './Components/Header/Header'; import { BrowserRouter as Router, Route ,Routes} from 'react-router-dom'; import Pages from './Pag ...

javascripthtmlcssnode.jsreactjs

The UI does not display the html code (specifically svg) added through jquery appending

I am working with the following HTML code: <svg> <g> <rect></rect> <text> abc </text> </g> <g> <rect></rect> <text> def </text> </g& ...

jqueryhtmldomsvg

Can you explain the techniques involved in creating the transitions and side effects on this website?

I recently came across a video showcasing some incredible websites with impressive effects. One of the standout sites featured was . As a novice in frontend development, I can't help but wonder how these stunning effects are created. ...

javascripthtmlcsseffects

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

Text alignment validation in jQuery

utilizing the validation capabilities of the jQuery validation plugin check out: http://jsfiddle.net/Kn3v5/205/ <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <div> <form id ...

jquerycssvalidation

What steps should I take to eliminate the gap between two side panel components?

Let's take a look at the concept I am working on: https://i.sstatic.net/RyQAB.png I'm aiming to extract the statistics element within the red outline. The spacing issue between the stats and balance panels perplexes me. To align these panels to ...

htmlcss

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

htmlcssbootstrap-5

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid

Apply a dynamic inline style to the header of an af:column to set the background color

I am facing a challenge where I need to dynamically change the background color of an af:column header. I have experimented with different solutions: Using the headerClass property in the CSS file for af:column does work, but dynamic changes are not poss ...

htmlcssjsforacle-adf

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

javascripthtmlcssreactjs

Experiencing issues with my website navigation malfunctioning on specific iOS devices

After testing my project today, I discovered that the mobile navigation on my website is not displaying its list items on certain iOS devices. The navigation worked fine on an iPhone 5 and iPad Mini, but failed to show the list items on an iPhone 4 and old ...

ioshtmlcssresponsive-design

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

Flexslider optimized for mobile devices

I am currently using the Sparkling theme on a Wordpress website. This particular theme utilizes Flexslider within a div at the top of the page. Each slide featured in the slider includes an image, as well as a div containing a post title and excerpt. The ...

cssflexslider

Sending an AJAX variable to JavaScript

Help me understand how I can pass an ajax variable to javascript in the following code example. Please note that while the 'append' function works, it may not be the most efficient solution. $.ajax({ type: "POST", dataT ...

javascriptphpjqueryhtmlajax

Create CSS rules to draw lines that stretch to the edges of the container

As a skilled developer with expertise in CSS and coding styling, I have encountered a new design that has been approved. I am currently working on achieving a specific look with drawing borders and lines that need to extend both left and down. Here is a sc ...

csslines

Adjust the color of the open icon (up chevron) on the Bootstrap 5 accordion button

After finding a helpful answer on Stack Overflow, I successfully changed the fill color of Bootstrap 5's down-chevron svg using CSS. Now, I am attempting to locate the URL for the up-chevron (open icon) so I can modify its fill color as well, but it i ...

cssbootstrap-5

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

When trying to access a view through a controller, the CSS is failing to apply properly

I'm having issues with CSS not working in my Codeigniter project, even when using the base_url() function. < link href="< ? php echo base_url(); ?> application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" /> ...

csscodeigniterbase-url