Why can't I float my navbar elements to the right when I use bootstrap's css file?

Question

I want to create a navbar to start my website out with but I'm having an issue with the css files that I'm working with. Primarily bootstrap's css file. I linked both my custom css file and bootstrap's to my html file, but I can't get my navbar to float to the right as long as bootstrap's css file is linked. I tried switching the order of the linked css files but to no avail. What does work is if I delete the bootstrap linked file but I want to practice working with bootstraps grid system in this project. As always help on this issue would be greatly appreciated.

ul {
    list-style: none;
    margin: 0;
    padding:0;
    overflow:hidden;
    background-color: darkkhaki;
    color:beige;
}

li {
    display: inline;
    float: right;
}

/*Add the background-color to <ul> instead of each <a> element if you want a full-width background color*/
li a {
    display: block;
    color: beige;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link type="text/css" rel="stylesheet" href="css/mainnature.css">
    
    
    

    <title>Nature Conservatory</title>
    
  </head>
  

  <body>
  <header> 
  <nav class="navbar">
  <ul>
  <li><a href="default.asp">Volunteer</a></li>
  <li><a href="news.asp">Support</a></li>
  <li><a href="contact.asp">Shop</a></li>
  <li><a href="about.asp">Search</a></li>
</ul>
 </nav>
  </header>
  
   
  </body>

</html>

Add `!important` to every attribute in your costum css files to make sure that your style is prior than bootstrap style — Houssem, Mar 12 '19 at 18:07
you don't need important!. TL;DR https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — iacobalin, Mar 12 '19 at 18:10

iacobalin · Answer 1 · 2019-03-12T18:05:47.660

On your .navbar class change justify-content value to flex-end; Or if you don't want to change bootstrap defaults just add an id or extra class name to you navbar:

ul {
    list-style: none;
    margin: 0;
    padding:0;
    overflow:hidden;
    background-color: darkkhaki;
    color:beige;
}

li {
    display: inline;
    float: right;
}

/*Add the background-color to <ul> instead of each <a> element if you want a full-width background color*/
li a {
    display: block;
    color: beige;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar.float-right {
  justify-content: flex-end;
}

<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link type="text/css" rel="stylesheet" href="css/mainnature.css">
    
    
    

    <title>Nature Conservatory</title>
    
  </head>
  

  <body>
  <header> 
  <nav class="navbar float-right">
  <ul>
  <li><a href="default.asp">Volunteer</a></li>
  <li><a href="news.asp">Support</a></li>
  <li><a href="contact.asp">Shop</a></li>
  <li><a href="about.asp">Search</a></li>
</ul>
 </nav>
  </header>
  
   
  </body>

</html>

Tommaso Boggia · Accepted Answer · 2019-03-12T18:13:27.980

Bootstrap 4 uses display Flex for alignment so floats don't do what they would in a display: block situation. iacobalin is correct that you need to use justify content, but Bootstrap 4 already provides a justify-content-end class that you can add to your nav.navbar and a .nav class that you can add to your ul without needing to add more lines to your custom css.

ul {
    /* list-style: none;
     margin: 0;
     padding:0;
     overflow:hidden;*/
    background-color: darkkhaki;
    color:beige;
}

/* li {
     display: inline;
     float: right;
 }*/

/*Add the background-color to <ul> instead of each <a> element if you want a full-width background color*/
li a {
    display: block;
    color: beige;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link type="text/css" rel="stylesheet" href="css/mainnature.css">
    
    
    

    <title>Nature Conservatory</title>
    
  </head>
  

  <body>
  <header> 
  <nav class="navbar justify-content-end">
  <ul class="nav">
  <li><a href="default.asp">Volunteer</a></li>
  <li><a href="news.asp">Support</a></li>
  <li><a href="contact.asp">Shop</a></li>
  <li><a href="about.asp">Search</a></li>
</ul>
 </nav>
  </header>
  
   
  </body>

</html>

score 0 · Answer 3 · answered Mar 12 '19 at 18:19

There's no need to float elements to the right since the class .nabvar is set display: flex by default on bootstrap. You just need to add the following to your .nabvar class:

 .nabvar
 {
    justify-content: flex-end;
 }

Additionally, if you float: right your li elements you'll get them arranged backwords, my advice is to remove that line of code

Why can't I float my navbar elements to the right when I use bootstrap's css file?

3 Answers3