I can't find information on how to use bootstrap to place all subsequent div lower than header.
I have it written like this:
<header className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a className="navbar-brand px-3 fs-4" href="/">Todos</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link fs-4" to="/about">List <span className="sr-only"></span></Link>
</li>
<li className="nav-item active px-3 fs-4">
<Link className="nav-link" to="/homepage"> Add <span className="sr-only"></span></Link>
</li>
</ul>
</div>
</header>
And now that I have added a button to this page it appears in the upper left corner, not below. There is also an overlap if I go to another page . Since I am new to this, I will be glad to help.
<div className="mbtn">
<button onClick={() => setType('books')} className="btn btn-outline-primary">Пользователи</button>
</div>
Related
Below is picture of where I am now. I always face this problem of not being able to place things flexibly using bootstrap. In this case, I would like to place all the buttons in the center using justify-content: center, but the built-in class of navbar-expand-sm apparently defaults to justify-content: flex-start. What should I do? Thanks
![Text](https://stacenter image description here
<nav class="navbar bg-danger navbar-dark position-relative">
<div class="navbar-expand-sm">
<div class="container-xxl">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<!-- How to put the buttons in the middle? -->
<ul class="navbar-nav">
<li class="nav-item ml-3">
Login
</li>
<li class="nav-item">
Other Service
</li>
<li class="nav-item">
My Blog
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
Either add justify-content-center next to navbar-expand-sm and see if this is working
Or trying adding the respective CSS
.navbar-expand-sm { justify-content: center !important; }
I am essentially trying to create active classes with Bootstrap to display a nav-pill/container around the active section of my webpage. This works fine on larger screens, but on smaller screens, with the hamburger menu active the nav-pill stretches across the entire div/container, but I want it to wrap around only the word similar to when it is a large screen.
Here is a codepen with some filler content to mimic my issue: https://codepen.io/100emoji/pen/mdxdpzp
and the code for the navbar only:
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="400" data-bs-smooth-scroll="true">
<!-- Navigation Bar-->
<nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
<div class="container">
Ken's Art & Frame
<button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon mid-bar"></span>
<span class="toggler-icon bot-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav nav-pills ms-auto">
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Artwork
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
I can only find solutions using bootstrap 4 through google
https://getbootstrap.com/docs/5.0/components/navbar/#containers
I think this is what you are looking for. Essentially you wrap a container around your UL to control the size.
The other option is to use the bootstrap width classes on each individual <li> like this:
<li class="nav-item w-50">
Or do it via CSS on <li> tags:
li {
width: 30%;
}
Two issues:
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
In CSS classes nothing else just background color only so nothing in css file anything.
Any help or suggestions
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg core-header navbar-light">
<div class="container">
<a href="#" class="navbar-brand"> <img class="image_size" src="/images/logo1.png" alt="Logo">
</a>
<button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
<div class="navbar-nav">
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"><i class="fab fa-youtube text-white"></i></a>
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"></a>
</div>
</div>
<div class="reserve">
<a target="_blank" class="button bg-white reserve-table" href="#">Reserve a Table</a>
</div>
</div>
</nav>
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so.
Solution
add class ml-auto to <div class="navbar-nav"> which will move social icons to right side.
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
Solution
The reason that is happening because 'container' is flex container and when navbar-collapse div is shown (which has 100% width) expands and takes space which falls the reserve button. So you need to remove 'remove button' div within <nav> and keep it next to <nav> tag and style accordingly.
Hope this helps.
i have navbar with two menu, want to center menu icon and text but i dont't find the class to used.
how can i do it ?
im sorry for my bad english
here my code
<body class="text-center">
<div class="bg-login">
<div class="container">
<nav class="navbar navbar-dark sticky-top h-100">
<ul class="nav navbar-nav ml-auto nav-fill">
<li class="navbar-item">
<a class="navbar-brand" href="#" id="navlink">
<span data-feather="globe"></span>
EN-US
</a>
</li>
<li class="navbar-item">
<a class="navbar-brand" href="#">
<span data-feather="globe"></span>
en-uk
</a>
</li>
</ul>
</nav>
</div>
</div>
<script type="text/javascript">
feather.replace()
</script>
</body>
jsfiddle : https://jsfiddle.net/lexavey/jywL5ves/12/
im use
<ul class="nav navbar-nav ml-auto nav-fill">
because i want navigation i right side like this https://prnt.sc/wb1d3s
my problem is center verticaly https://prnt.sc/wb1hp1
add flex classes to the container div
<div class="container d-flex justify-content-center">
You can use these classes in Nav elements
<a class="navbar-brand d-flex align-items-center" href="#" id="navlink">
I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)