I can't get the "about me" "contact" and "portfolio" all on to stay on the same line as the my name section, even though they are on the same div. And I can't use positioning because this bootstrap.
How can I solve this?
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid border" style="overflow:visible">
Vamsi Krishna Pappusetti
<ul class="nav row justify-content-end" id="navbar">
<li class="nav-item">
<a class="nav-link " href="#">About Me</a>
</li>
<li class="nav">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
Here's one idea:
I made the container <div> into a nav row, with p-0 and m-0 to clear padding and margins.
I made the "name" link into a nav-link so it's padding is the same as other links.
I set ml-auto on the <ul> to align it to the right side.
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav row border container-fluid p-0 m-0">
Vamsi Krishna Pappusetti
<ul class="nav ml-auto">
<li>
<a class="nav-link" href="#">About Me</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
You have to combine "nameBlock" and "navbar" into a row div and use ml-auto (Margin utilities) in Bootstrap 4 to align navbar to end.
Code: https://codepen.io/1412108/pen/BVLRRP
Bootstrap 4 Margin Utilities
Related
Here is my code (only body)
<body>
<div class="container-fluid">
<div class="row">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
Display :
I can however , center ul when i place ul within a column. Is there a specific reason why my above code could not center ul
EDIT :
If i remove row from the code, I could use justify-content-center on ul.My question however still stands as I could not explain the behavior when row is present
<body>
<div class="container-fluid">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</body>
Try this instead,
First Method
please add flex-basis:100%; to for align <ul> center.
ul{
flex-basis:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
Second Method
please add justify-content-center to row class to align <ul> center instead of adding to <ul> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
The ul itself is not centered, so using .justify-content-center will center its child li elements only inside the ul, while it itself remains on the left. Add .justify-content-center to the ul's parent element (the row div) and it should work.
try this,
<div class="row">
<ul class="nav justify-content-center nav-tabs" style="display: flex; justify-content: center;">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
I am making a website with Bootstrap and the navbar to stick to the top however using the class sticky-top doesn't seem to do anything.
Here is the code for the nav:
<div class="row">
<div class="col-md-12">
<ul class="nav justify-content-center sticky-top">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
Hope someone can help!
You need to put sticky-top to the container of your navbar, if that row is the navbar, then you need to put it there instead of its child.
/* For displaying */
body {
height: 300vh;
background-image: linear-gradient(to bottom, white, black);
}
<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">
<!-- You need to move sticky-top to the outer element of navbar, which is here -->
<div class="row sticky-top">
<div class="col-md-12">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
My element has to be clicked on for CSS to work.
I tried using bootstrap for a nav bar. With 1 logout link on the top right.
I used navbar-nav ml-auto for it.
After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;
When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.
Here is what I've tried:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
CSS:
* {
/*display: none;*/
box-sizing: border-box;
}
#logout-btn.nav-item {
margin-right: 50% !important;
}
Can you help me explain why, or is it my browser's fault?
I find it quite weird, already cleared cached.
Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-4">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
I'm using <ul class="nav nav-tabs">, wrapped within a container, and by design when the break point, marked by the end of the container is reached, it wraps around to a new line. How can I prevent this from happening so that everything stays inline and I can scroll horizontally instead?
Edit: Included code
<div class="jumbotron border">
<div class="row">
<div class="col">
<img src="image.jpg" alt="Placeholder for image">
</div>
</div>
<div class="row">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
Use flex-nowrap class for the list. Use d-flex also if the ul is not already flex,
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
I have this simple nav with three nav-items in bootstrap 4, beta:
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a>
</li>
<li class="nav-item">
<a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a>
</li>
<li class="nav-item">
<a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a>
</li>
</ul>
</div>
It looks like this:
What I would like, is for the nav-item called Test3 to be right aligned inside the ul.
Here is a jsfiddle.
How can I do this?
You can do it by adding ml-auto to the last item. That sets the left margin to auto, which means it will take the maximum available space as margin, so it will jump to right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a>
</li>
<li class="nav-item">
<a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a>
</li>
</ul>
</div>