How to have navbar from right to left?

I am using this bootstrap:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">      
    <a class="navbar-brand" href="#">
        <img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
    </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">link</a>
          <a class="dropdown-item" href="#">link</a>
        </div>
      </li>
    </ul>
  </div>
  </nav>
  1. How can I move logo and links to right side? first logo at right them links from right to left. How?
 <nav class="navbar navbar-light bg-light">
<div class="container">

        <a href="#">Features</a>
        <a href="#">Pricing</a>
      </li>
    </ul>

</div>
  </nav>
  1. How to have links in footer from right to left with a reasonable space from each other?

  2. after top navbar how to have text inside a container with a reasonable space from navbar, as current the text begins immediately with no space under navbar?

  3. How to have both text justify and right aligned? I mean the last line of the paragraph must be right aligned and the entire text justified. How?

Using flex you can change the direction of the row.

e.g.


@media (min-width: 992px){
.navbar-expand-lg {
	flex-direction:row-reverse;
 }
 #navbarNavDropdown{flex-grow:0;}
}

I can’t answer your other questions as you don’t show the code for them. :slight_smile:

I can tell you though that you need to study the bootstrap documentation as a lot of these things are available via bootstrap. You also need to study flexbox a little otherwise it will hamper your progress.

using text-left text-right don’t affect the navbar links?

and how to have content text one line lower than header navbar as my text begins immediately under navbar?

They’re not going to reverse the row those utility classes will simply align the text in its own container not the whole row.

You need the flex utility classes for flexbox as shown in the documentation.

Or use the code I posted.

You would add some padding top to the new section or perhaps a margin-top. Do you have knowledge of css ?

If not I suggest you take a course before trying to learn bootstrap as it’s a complicated beast to manage. :slight_smile:

You need a good grasp of css to make bootstrap work for you

Give sample where to add margin-top? Inside container tag? Or where? Sample?

As I said in my first post I can’t answer that question until you show me the html you are using and the css you are applying.

I can’t second guess what html you are using which means I won’t know what css bootstrap is applying by default.

You have to help us to help you. We are not a free coding service.

1 Like
<!doctype html>
<html>
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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 href="css/style.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">      
    <a class="navbar-brand" href="#">
        <img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
    </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">link</a>
          <a class="dropdown-item" href="#">link</a>
        </div>
      </li>
    </ul>
  </div>
  </nav>

<div class="container">      
      <h3><p class="text-center">
              Lorem ipsum
      </p></h3>
</div>


<nav class="navbar navbar-light bg-light">
         <div class="container">
                 <a class="nav-link" href="privacy.php">Privacy Policy</a>
                 <p>All Rights Reserved.</p>
         </div>
</nav>

</body>

Here is the full html code, problem is that Lorem ipsum is immediately under top navbar that is not nice. There should be a bit reasonable space. A bad practive is adding <p>&nbsp;</p> after container line. Where to add margin-top? and how much value is good?

As I said a couple of times now bootstrap has utility classes already set up for this with reasonable settings that you can use.

You can find the details here in the documentation just as I have done.

I’ve added a class of py-5 to the container which will apply padding top and bottom of 3rem to the element. You can use other utility classes just to add padding top only if you want. The classes are post-fixed with numbers from 0 - 5 and apply pre-defined amounts of padding form .25rem for -1 to 3rem for -5.

<div class="container py-5">
  <h3 class="text-center">Lorem ipsum </h3>
</div>

Note that I removed your p element from between the h3 element as that is invalid and not allowed and nonsense.

Please study the bootstrap documentation carefully and in depth. It is only by practice and experimentation that you are going to learn. I am not going to spoon feed you answers that are easily obtainable from the documentation. You must show some willingness to learn or at least try by yourself even if at first you fail :slight_smile:

1 Like

In bootstrap doc is mentioned to include its js I have to use:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

I think here I already called jquery.js? or this slim is something else?

When I I want to use jquery-ui

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "input" ).checkboxradio({
      icon: false
    });
  } );
  </script>

It says checkboxradio is not a function. I added this too as mentioned jquery-ui doc:

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

but still not working. what mistake I did?

This is really a question for the JS forum but I think you need a different version of jquery.

Try this one:


<!--
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

Do not include jquery twice.

Also I believe there may be conflict between jqueryUI with the bootstrap css and js. You would be better sticking to one framework or the other and not just loading more and more frameworks.

Not yet working. I opened another post in JS forums here.

It’s working for me with that replacement above and the UI css added.

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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 href="css/style.css" rel="stylesheet">-->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!--
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">link</a> </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> link </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">link</a> <a class="dropdown-item" href="#">link</a> </div>
      </li>
    </ul>
  </div>
</nav>
<div class="container py-5">
  <h3 class="text-center">Lorem ipsum </h3>
</div>
<nav class="navbar navbar-light bg-light">
  <div class="container"> <a class="nav-link" href="privacy.php">Privacy Policy</a>
    <p>All Rights Reserved.</p>
  </div>
</nav>
<label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label>
<input type="checkbox" id="radio-2">

 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "input" ).checkboxradio({
      icon: false
    });
  } );
  </script>
</body>
</html>

Although the above is working I suggest you continue with the other thread in the JS forum as this is a new issue not related to CSS and my JS is limited.

1 Like