I want to add an instagram icon to the footer of my website.
I have created the circle and changed the colour, but I cant get the icon for Instagram to work.
This is what it looks like at the moment
Heres the code in the Static Block;
<a class="first" href="#" title="Join us on Facebook">
<span class="icon icon-hover i-facebook-w" style="background-color: #3b5998"></span>
</a>
<a href="#" title="Follow us on Instagram">
<span class="icon icon-hover i-instagram-w" style="background-color: #c13584"></span>
</a>
<a href="#" title="Youtube">
<span class="icon icon-hover i-youtube-w" style="background-color: #bb0000"></span>
</a>
<a href="http://twitter.com/infortis" title="Follow Infortis on Twitter">
<span class="icon icon-hover i-twitter-w" style="background-color: #00aced"></span>
</a>
<a href="#" title="Pinterest">
<span class="icon icon-hover i-pinterest-w" style="background-color: #cb2027"></span>
</a>
The Instagram icon code is;
.ic-instagram:before {
content: "\e22f";
}
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
I am new to mean stack. I have used a template for nav bar from https://frontendfunn.com/bootstrap-4/admin-dashboard-template-development-tutorial/. Whenever I log in it takes me to the page with nav bar but the problem is when I click collapse bar nothing happens. When I refresh the page it works but clicking on another option in the sidebar, collapse bar option doesn't work. Please help me out.
Screenshot of navigation bar
login.component.ts:
ngOnInit() {
if (this.loginService.isLoggedIn()) {
this.router.navigateByUrl('/addcandidates');
}
}
onSubmit(form: NgForm) {
this.loginService.login(form.value).subscribe(
res => {
// tslint:disable-next-line:no-string-literal
this.loginService.setToken(res['token']);
// this.successful = 'Successfully logged in';
this.router.navigate(['addcandidates']);
},
err => {
this.serverErrorMessages = err.error.message;
}
);
}
main.component.ts:
ngOnInit() {
this.isLoggedIn = this.loginService.isLoggedIn;
}
onLogout() {
this.loginService.deleteToken();
this.router.navigate(['/login']);
}
main.component.html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler sideMenuToggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<a class="nav-link px-2" (click)="onLogout()">
<span class="text">Logout</span>
</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">DropDown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="wrapper d-flex">
<div class="sideMenu bg-mattBlackLight">
<div class="sidebar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/']">
<i class="material-icons icon">dashboard</i>
<span class="text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/addcandidates']">
<i class="material-icons icon">person</i>
<span class="text">Create New Test</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/qb_dept']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Add Question Bank</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/currentexam']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Current Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/previousexam']">
<i class="material-icons icon">settings</i>
<span class="text">Previous Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 sideMenuToggler">
<i class="material-icons icon expandView ">view_list</i>
<span class="text">Collapse Side Bar</span>
</a>
</li>
</ul>
</div>
</div>
</div>
I'm trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )
I have a navbar with center aligned menu items, of which some are dropdown-menus. The navbar and dropdown menu are 100% width but I would like the drop-down menu to be say 60% width and still centre aligned.
HTML:
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown megamenu-li">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu megamenu" aria-labelledby="navitem-1">
<div class="row">
<div class="col-sm-6 col-lg-3">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-sm-6 col-lg-3">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Item
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Item
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS :
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
}
Please see demo here: https://jsfiddle.net/stackoverflow123/53fn2kop/
Reducing the .megamenu width reduces the downdown-menu panel as expected, but it stops it being centrally aligned.
Thank you in advance
desired layout
I managed to approach your goal (if I understood right) applying mainly the next style to the dropdown-menu, but only on the specific bootstrap break-point (LG), and removing all of your style:
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
Also, I removed the outer row and col-12 and replaced the container by container-fluid, and make some minor changes to the items on the dropdown-menu so they look centered. You can check it below:
#media (min-width: 992px)
{
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
}
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-1">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-2" data-toggle="dropdown">
Drop down 2
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-2">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
Item
</li>
<li class="nav-item">
Item
</li>
<li class="nav-item">
Item 333
</li>
<li class="nav-item">
Item 99999
</li>
</ul>
</div>
</nav>
</div>
Building off of #Shidersz approach, I wanted a full-width centered nav bar with columns. I used bootstrap 4 and the added a custom-dropdown class. This requires the navbar to be fixed-top or scrolling doesn't have the expected behavior.
.custom-dropdown {
position: fixed !important;
width: 100vw;
left: 0vw !important;
top: 50px !important;
}
<nav class="navbar fixed-top navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-5">
<div class="container">
<a class="navbar-brand">Full Width Awesomness</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark">Top Sellers</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu custom-dropdown border-0 border-bottom text-center" aria-labelledby="navbarDropdown">
<div class="row">
<div class="col-sm-3">
<label class="font-weight-bold">Item 1 </label>
<a class="dropdown-item" href="#">Top Sellers</a>
<a class="dropdown-item" href="#">Hot and New</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>DVDs </label>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>Books </label>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>CDs </label>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-2 pt-5">
<div class="row" style="background-color: pink; height:800px;">
CONTENT
</div>
</div>
fiddle here:
https://jsfiddle.net/mgervasoni/71c0yub4/24/
I am sure somebody has aleady posted such a question but I could not find a solution.
I am using Ruby on Rails, Brootstrap and I want to be my dropdown menu(whole) in the middle of the page, but the text (links like We, What we do and etc...) in the dropdown-menu should be left-sided.
How can I do it?
<div class="btn-toolbar">
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
About us
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong> We</strong>
</a>
</li>
<li>
<div class="mcol">
<ul class ="sub">
<div class ="subcolumns menuactivity">
What we do
</li>
Countries
</div>
</ul>
<li>
<a href="del">
<strong>References </strong>
</a>
</li>
</ul>
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
News & Events
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong>Calender</strong>
</a>
</li>
<ul class ="sub">
<div class ="subcolumns menuactivity">
<li>
News archive
</li>
</ul>
</div>
</ul>
</div>
If you're using bootstrap as it is by default you can try below
<a class="pull-left" href="details"> What we do </a>
I have updated with an example.
http://jsfiddle.net/acc8t/
I did this by using below css
.sub{margin-left:0px;}
I have founf as well another solution already.
Just to put in css the following code:
.dropdown-menu {
text-align: left;
}
.btn-toolbar{
text-align: center;
padding-bottom:40px;
}