Decreasing space in-between navbar elements Bootstrap-5 - html

This is what im aiming for (Ignore fancy background)
This is what ive got:
How would I decrease the space between the elements, and centre it in the navbar?
Heres my code so far - Using bootstrap 5
<nav class="navbar bg-primary mt-3">
<div class="container-inline navbar-brand">
<img src="img/logo.png" class="ms-4" width="60" alt="Logo">
<a class="text-light ms-5 fw-bold">TEST</a>
</div>
<a class="nav-link text-light">One</a>
<a class="nav-link text-light">Two</a>
<a class="nav-link text-light">Three</a>
<a class="nav-link text-light">Four</a>
</nav>

When working with Bootstrap's Navbar, only use the supported content. Follow the guidance from the docs...
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
So, following this guidance for your Navbar...
Assuming you want it to always remain horizontal, add the navbar-expand class.
The nav-links should be contained inside a navbar-nav (supported content)
Use the spacing/flex utility classes. To center the navbar-nav, use w-100 to create 3 equal width navbar divs/sections. Then justify-content-center on the navbar-nav to center content of the middle section.
<nav class="navbar navbar-expand bg-primary mt-3">
<div class="container-fluid">
<div class="w-100">
<img src="//placehold.it/60x30" class="ms-4" width="60" alt="Logo">
<a class="navbar-bran text-light ms-5 fw-bold">TEST</a>
</div>
<div class="navbar-nav justify-content-center">
<a class="nav-link text-light">One</a>
<a class="nav-link text-light">Two</a>
<a class="nav-link text-light">Three</a>
<a class="nav-link text-light">Four</a>
</div>
<div class="w-100">
</div>
</div>
</nav>
Demo
Since Bootstrap 5 still uses flexbox like Bootstrap 4, aligning Navbar content hasn't changed between the 2 versions.

Related

Some Bootstrap elements are not working - Navbar-collapse , p- , small column images

Thank you all for the wonderful resources so far. Been trying to sort this out the past days. Bootstrap seems to work in some places, but not in others.
https://tellus.llc
Basic functionality seems to be there. I'm able to add many bootstrap-specific elements (rows, columns, navbar, responsive text and images), but small things don't seem to be working as expected.
My navbar will not expand or collapse on medium or small screens (copy/pasting the unmodified code straight from boostrap's website does not work in my doc either. JavaScript / dependency issue?) .
<nav class="navbar fixed-top navbar-expand-md bg-light navbar-light" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#top">
<img class="nav-img" src="assets/images/TellusLogo.png"/>
</a>
<button
style="margin-right:3vw;"
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navCollapse"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#partners">Partners</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#training">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#software">Software</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#concept">Concept</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rescue">Rescue</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I cannot add spacing or gaps to an element. Adding a p-1 or pt-4 class gives no padding.
Some divs will ignore the column spacing assigned to them (col-sm-4 does not collapse, and looks like a col-sm-12). The "vertical-align" is a custom class, flex container. For some reason bootstrap's grid was giving me grief here too, but it worked adding flexbox.
<article class="container spacer-4">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
<img class="img-fluid" src="../assets/images/partners/canary-labs.png" />
</div>
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
<img class="img-fluid" src="../assets/images/partners/codesys.png" />
</div>
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
<img class="img-fluid" src="../assets/images/partners/hannah-instruments.jpg" />
</div>
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
<img class="img-fluid" src="../assets/images/partners/inductive-automation-logo.png" />
</div>
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
<img class="img-fluid" src="../assets/images/partners/ssh.png" />
</div>
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
<img class="img-fluid" src="../assets/images/partners/onlogic.png" />
</div>
</div>
</article>
My best guess was jquery or some other JS dependency, but I've tried several versions of each script, to no result. It could also be an issue with my nesting.
I'm hosting through github -> google domains, but the issues show up on my local dev server.
I figure all the info is there, but I would be happy to share anything else that would help. Thank you again!
According to the version of bootstrap you are using i.e. 5.0, For navbar you have to change data-toggle and data-target with data-bs-toggle and data-bs-target.
Bootstrap Navbar
You grid is working fine till small screen. But you've to change
<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
with
<div class="col-lg-2 col-md-4 col-sm-4 col-4 vertical-align">
to work responsiveness for all screens.
Bootstrap Grid
To solve issues with the Navbar-collapse in bootstrap 5 you should use 'data-bs'
Your navbar-toggler has data-target and data-toggle which aren't used by bootstrap 5, use data-bs-toggle and data-bs-target instead

Aligning icons on the right hand side on Navbar Bootstrap

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.

Vertically align fontawesome icon with text in navbar

I'm trying to vertically align a fontawesome icon with some text in a navbar from bootstrap. The vertical size of the navbar is set to 10vh. I'm not able to get the text aligned with the icon, it appears like in the below image:
Also I would like to add some horizontal space between the icon and the text. Here is my code:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link d-flex align-items-center justify-content-center" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p>Home</p><!--<span class="sr-only">(current)</span>-->
</a>
</li>
... (some more li)
</ul>
</nav>
I've also tried to put the icon inside the paragraph, placing the a element inside a div, and setting both of the same font-size, but I cannot make it work.
Try the following code, it worked for me:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" style="display: flex; align-items: center;" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p style="margin-left: 12px;">Home</p>
</a>
</li>
... (some more li)
</ul>
</nav>
Also, here I'm giving the space between the text and the icon as 12px, you can change this according to your need.
You should make the tag a flex container with height 100% (obviously after setting position: relative. Then you can easily do justify-content: center; and align-items: center;
For any other HTML and CSS noob like me, it seems that p elements have margin by default. I have seen this question where it says that CSS 2.1 specification has a default style sheet for basic elements. Removing the bottom margin of the p element made it aligned with the icon.
Regarding horizontal space, DIVYIA BAID's suggestion to set a left margin is exactly what I was looking for.
it's very simple
Try This code for best alignment for Fontawesome or any other icon
<li styles="display:flex">
Home
<i class="fal fa-home" style="vertical-align: middle;margin: auto;"></i>
</li>
Wrap the content in a flex container and then align items center to horizontally align them.

Mimicking Bootstrap's Webpage's Navbar (with Angular)

1. The Problem
I'm trying to mimic Bootstrap's Webpage's Navbar but I'm having no success, despite having the same classes all around. I'm also using Angular and that got me wondering if that was related to something in the TypeScript framework and not with Bootstrap itself — that is the case for the dropdown button for example.
The main issue is that the uls with the menu items and social icons are not forming different rows when the screen width is reduced.
For example, this is what I expected with my website:
And this is what I got instead:
2. The Code
I'm not using anything fancy in Angular at this point, just plain objects' properties (I've tried it with a header instead of a nav also):
<nav class="navbar navbar-expand navbar-light bg-light">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
Logo
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
</ul>
</nav>
Boy, do I feel stupid for this...
After a lot of time tinkering with the subelements, the mistake was at the top all along. I had accidentally copy-pasted the <nav> element at the top from another page, and, thus, it lacked the flex-column and flex-md-row classes:
<nav class="navbar navbar-expand navbar-light flex-column flex-md-row bg-light">
Anyway, thank you very much for those who tried to help.

Bootstrap 4 centered logo and tagline on nav collapse

I'm working on a Bootstrap 4 project where I have a nav bar with a centered logo and tagline, then some links to the left and right. It works pretty much as I would like, only ideally I would like the logo to stay centered after the nav links collapse.
Here is the code I have so far:
<nav class="navbar navbar-expand-lg navbar-light bg-white justify-content-between">
<div class="container-fluid ">
<div class="d-flex flex-column text-center order-lg-2">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/350x150" alt="">
</a>
<h2 class="tagline navbar-text">eco freindly clothing</h2>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-3">
<ul class="nav navbar-nav ml-auto">
<a class="nav-link" href="#">our ethics</a>
<a class="nav-link" href="#">contact</a>
<a class="nav-link" href="#">shop</a>
</ul>
</div>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="">instagram</a></li>
<li class="nav-item"><a class="nav-link" href="">facebook</a></li>
<li class="nav-item"><a class="nav-link" href="">pinterest</a></li>
</ul>
</div>
</div>
</nav>
Currently after the links collapse the navbar toggle is on the right and logo and tagline on the left. How can I retain the logo and tagline in the center?
Here is a codeply
Thanks for any help!
The flexbox parent of the brand, logo, navbar toggler and 2 collapsable menus is .container-fluid, not the <nav>. So you need to do flex-direction: column; on small screens and flex-direction: row; with justify-content: space-between; on larger screens.
You can use bootstrap built-in classes for that too.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid flex-column flex-lg-row justify-content-lg-between">
...
</div>
</nav>
fiddle: http://jsfiddle.net/aq9Laaew/144985/ (don't want to register with codeply)
You can do this really simply by creating a "centered" class for the div containing your logo and header text.
.centered {
margin:auto;
display:block;
}
Is this what you had in mind? See the codepen below.
https://www.codeply.com/go/nss8DJRYN3