Is it possible to create navigation bar with image icon at page bottom by using twitter bootstrap, here is sample image of the icon bar,
Here is an example for you :
<div class="nav-bottom">
<ul class="container nav nav-pills">
<li class="col-xs-4 col-sm-2 active">
<a href="#">
<i class="glyphicon glyphicon-comment"></i><br>
Message Board
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-home"></i><br>
Rooms
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-shopping-cart"></i><br>
Shopping List
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i><br>
Home Helpers
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-cog"></i><br>
Settings
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-user"></i><br>
User
</a>
</li>
</ul>
</div>
.nav-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: black;
padding: 5px 0;
}
.nav-bottom li + li {
margin-left: 0px;
}
.nav-bottom li a {
text-align: center;
background: black;
color: #ecf0f1;
}
.nav-bottom li:hover a,
.nav-bottom li:focus a {
background: #2980b9;
color: #ecf0f1;
}
.nav-bottom li.active a {
background: black;
color: #3498db;
}
Bootply
Related
Hello i am trying to make a navbar in laravel with bootstrap, i am not that good in front-end so i am learning. The navbar in bigger screen shows good but in smaller one the buttons are more to the right side of the screen. This is the code that i have done:
Html:
<div>
<nav id="sidebar" class="active">
<div class="text-start">
<div class="sidebar-header">
<img src="{{ asset('assets/img/cash-flow.png') }}" class="image" alt="logo" class="app-logo">
</div>
<div class="horizontal-menu">
<div class="row">
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-home"></i> Dashboard</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-list"></i>
Veprime</button>
<div class="dropdown-content">
<i class="fas fa-solid fa-plus"></i> Porosite
<i class="fas fa-money-bill-wave"></i> Konfirmo shpenzim
<i class="fas fa-receipt"></i> Konfirmo Arketim
<i class="fas fa-solid fa-user-pen"></i> Veprimet e mia
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-check-to-slot"></i> Arka</button>
<div class="dropdown-content">
<i class="fas fa-cash-register"></i> Arka
<i class="fas fa-coins"></i> Konvertim
<i class="fas fa-solid fa-hand-holding-dollar"></i> Monedhat
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-screwdriver-wrench"></i> Administrimi</button>
<div class="dropdown-content">
<i class="fas fa-user"></i> Perdoruesit
<i class="fas fa-random"></i> Rolet
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-solid fa-file-invoice"></i> Faturimi</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-regular fa-share-from-square"></i> Shpenzimet e mia</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<a href="#" id="nav2" class="nav-item nav-link dropdown-toggle text-secondary" data-bs-toggle="dropdown" aria-expanded="false"> <button class="dropDownButton">
<i class="fas fa-user"></i> <span>{{ auth()->user()->name }}</span>
</button></a>
<div class="dropdown-profile">
<i class="fas fa-address-card"></i> Profili
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="dropdown-item">
<i class="fas fa-sign-out-alt">
</i> Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
#include('partials.menu-horizontal')
CSS
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!--Font Awesome-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts-->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!--MDB-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"
rel="stylesheet"
/>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"
></script>
<style>
.dropDownButton {
background-color: white;
color: #6c757d;
padding: 16px;
font-size: 16px;
border: none;
width:200px;
}
.horizontal-menu{
width:850%;
top:10px;
margin-left: 210%;
}
.dropdown {
width:90px;
margin-top: -55px;
margin-left: 6%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 200%;
z-index: 1;
}
.dropdown-profile {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 220%;
z-index: 1;
}
.dropdown-profile a{
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a{
color:#6c757d;
}
.dropdown-content a:hover {background-color: #2196f3; color:white;}
.dropdown-item:hover {background-color: #2196f3; color:white;}
.dropdown:hover .dropdown-profile {display: block;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropDownButton {background-color: #2196f3; color:white;}
.image{
width:100px;
height:48px;
margin-left: 150%;
}
</style>
How it looks like in smaller screen:
How it looks in bigger screen:
As you can see the admin is off the screen i need the navbar to stay static to the changes. My css is for sure bad as i said im learning.
This is not the proper way of using navbar of bootstrap.
Check out this method in which the use of css is minimal, and mosly used boostrap class and components
.navbar-logo {
width: 140px;
}
.dropdown-menu{
background-color: #f1f1f1;
}
.dropdown-item > i ,.nav-link > i{margin-right:8px;}
.nav-link{white-space:nowrap}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid navbar-logo" src="https://cashflow.io/wp-content/uploads/2021/03/CashflowLogo.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-home"></i>Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-list"></i>Veprime
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-plus"></i>Porosite</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-money-bill-wave"></i>Konfirmo shpenzim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-receipt"></i>Konfirmo Arketim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-user-pen"></i>Veprimet e mia</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-check-to-slot"></i>Arka
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-cash-register"></i>Arka</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-coins"></i>Konvertim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-hand-holding-dollar"></i>Monedhat</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-screwdriver-wrench"></i>Administrimi
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-user"></i>Perdoruesit</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-random"></i>Rolet</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-solid fa-file-invoice"></i>Faturimi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-regular fa-share-from-square"></i>Shpenzimet e mia</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>Admin
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-address-card"></i>Profili</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt">
</i>Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I fixed my code by using this example in W3SCHOOLS. Code Example
Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/originals.html
I'm attempting to create a responsive navbar in which the current dropdown-items appear as the standard nav-items after collapse.
See this image:
The dropdown-items are displaying as intended on desktop. On mobile, however, the separate dropdown is unnecessary. Here is how it displays with Bootstrap 4 out of the box:
Does anyone know of a convenient or custom solution to remove the dropdown once the navbar-collapse is in use on mobile etc such that the dropdown-items appear just like the navbar-items? Ideally, the "More" nav-link would display:none and the nav-items would continue from "Contact" to "Works On Display" seamlessly.
HTML:
<nav id="navHome" class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container-fluid max-width-940">
<a class="navbar-brand" href="index.html">
<img src="images/mb.svg" alt="Margaret Biggs" width="220px"/>
</a>
<button class="navbar-toggler togglerNoBorder" 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 backgroundWhite" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="bio.html">Bio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="originals.html">Originals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="exhibition.html">Exhibition</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prints.html">Prints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="professionals.html">For Professionals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown navDropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu navDropdown" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="works-on-display.html">Works on Display</a>
<a class="dropdown-item" href="poetry.html">Poetry</a>
<a class="dropdown-item" href="commissions.html">Commissions</a>
<a class="dropdown-item" href="blog.html">Blog</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-right {
float:right;
}
.togglerNoBorder{
border: 0px solid transparent;
}
.nav940{
max-width:940px;
margin:0 auto;
}
#navHome {
color:rgb(34, 34, 34);
font-size:13px;
font-weight:400;
line-height:16px;
text-transform:uppercase;
background-color:white;
height:60px;
box-shadow: 0 0 18px -4px #000;
}
#navHome a{
color:rgb(34, 34, 34);
}
#navHome a:hover{
color:#165fa5;
}
.navDropdown {
font-size:13px;
}
.navDropdown a:hover {
background-color:white;
}
.backgroundWhite{
background-color:white;
}
.nav-item{
padding-left:10px;
}
.dropdown-item {
padding-top:10px;
}
.navbar-brand {
margin-bottom:3px;
}
.dropdown-menu {
top:45px;
}
Use a #media query for mobile (<992px) to show the dropdown-menu as normal nav-links...
#media (max-width: 992px) {
.dropdown-toggle {
display: none;
}
.dropdown-menu {
display: block;
position: relative;
border-width: 0;
padding: 0;
margin: 0;
}
.dropdown-item {
padding: .5rem 0rem;
color: rgba(0,0,0,.5);
}
}
https://www.codeply.com/go/lAAQOwhAx0
Based on the excellent answer by #Zim, I modified the style a bit to fit one by side in a dark navbar. Tested with Bootstrap 5, but I guess it should work in Bootstrap 4 as well.
#media (max-width: 992px) {
.dropdown-toggle {
display: none;
}
.dropdown-menu {
position: relative;
display: contents;
border-width: 0;
padding: 0;
margin: 0;
color: transparent;
}
.dropdown-item {
color: white;
background-color: black;
display: inline;
}
}
<div class="collapse navbar-collapse" id="navbarColor01">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
In cosmo bootswatch [boostrap theme] js for dropdown menu not work!?
as you see in up image, menu only droped down!
I run it on localhost
I see other posts on stack but not worked for me
fixed;
add two script tag in end of layout :
#RenderSection("scripts", required: false)
<script src="https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://bootswatch.com/_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
I'm newbee in Boostrap and I try since 2 days to manage Boostrap carouseul mode.
My images in slide are Disproportionate when I resize navigator ! I was unable to find solution. I try many solution in CSS but I naver finnd solution.
I use default CSS parameter, present in carousel mode. I try carousel mode from w3schools (image are not corrupt when we resize navigator).
My CSS
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
margin: auto;
}
My HTML
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="media/image1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans"> bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Plus d'informations</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="media/image2.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans">bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contactez nous</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="media/image3.jpg" alt="">
<div class="container">
<div class="carousel-caption" style="text-align:left">
<h1>bla </h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contenu des cours</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
The result when I resize image to Smarphone mode :
Thank for your help
Regard
Edit : Banzay :
I try to remove it and the result decrease image in hignht when I reduce the width of the navigateur.
friends!
Is there any opportunity to create nested dropdown(multilevel dropdown) inside of dropdown menu item with bootsrap 3? Here is http://jsfiddle.net/kkqxgfk6/1/ what i'm trying to do. May be I made mistake somewhere in the code, is that so?
Here is the html-code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The nested "Dropdown2" menu item cann't be opened like its parent menu item called "Dropdown"
Add all bold content into your code.
<ul class="dropdown-menu" role="menu" **onclick="event.stopPropagation();"**>
<li class="dropdown" **id="test"**>
Dropdown2 <span class="caret"></span>
Add this code into javascript.
$( "#test1" ).click(function() {
$(this).attr("aria-expanded", "true");
$('#test').addClass("open");
});
Reasons for your problem By default when you click inside dropdown it closes.
here we are adding classes dynamically to second dropdown list.
Create one more CSS file and define "Dropdown-submenu" class.
Apply this "Dropdown-submenu" class to your inner "LI" tag as:
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown dropdown-submenu">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
The CSS file Will define Dropdown-submenu as:
.dropdown-submenu {
position:relative; } .dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu {
display:block; } .dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#333333;
margin-top:5px;
margin-right:-10px; } .dropdown-submenu:hover>a:after {
border-left-color: #999999; } .dropdown-submenu.pull-left {
float:none; } .dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px; }