I have this nav that has a dropdown
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">SearchICE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="input-group len">
<input type="text" class="form-control sblength" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-success bround" type="button">Search</button>
</div>
</div>
<div class="btn-group ml-auto">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div
</nav>
and this is the dropdown
<div class="btn-group ml-auto">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
This is the fiddle https://jsfiddle.net/yztumo0x/1/ and https://jsfiddle.net/yztumo0x/1/show
The account dropdown do not float left and instead protrudes to the right where its not visiable.
How can i fix this?
It seems to be working fine for me. Check the Codepen. Make sure you have imported the right js and css files.
<div class="btn-group ml-auto">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Related
I want to create a navbar like this site: digikala.com
my problem is when the mouse goes on menu item drop-down on mouse hover and open a container for all links to show in right
I want to know how I can have a container like this site?
I use bootstrap 4.6 in this page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<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 navbar-light bg-light">
<a class="navbar-brand" style="color: purple;" href="#">Partineh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<!-- <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> -->
<li class="nav-item">
<div class="dropdown">
<button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<h5>دسته بندی کالاها</h5>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="menu-grid">
<div class="btn-group dropleft">
<button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft1
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<div class="container">
<div class="row">
<div class="col-12">
<button class="dropdown-item" type="button">Action1</button>
<button class="dropdown-item" type="button">Another action1</button>
<button class="dropdown-item" type="button">Something else here1</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">سوپرمارکت</a>
</li>
</ul>
</div>
</nav>
I have a table header with buttons, but the moment I add my dropdown button, it moves all of them around and makes them ugly to look at. This is my dropdown button:
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
These are my other buttons:
<div class="col text-right">
<button type="submit" form="selecties" formaction="<?php echo base_url("/crud/email_multiple") ?>"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<?php if ($userInfo["rights"] == 'admin') : ?>
<button type="submit" form="selecties"
formaction="<?php echo base_url("/crud/delete_multiple") ?>"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a href="<?php echo base_url("/crud/add") ?>"
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
<?php endif; ?>
</div>
I want to put my dropdown next to the other buttons, but I'm guessing because it's a div and not a button they don't align properly?
When I put my dropdown in the same div as my buttons, the dropdown goes vertically above the other buttons.
Would appreciate some help!
You can use flex to align your element. like Bootstrap classes d-flex and justify-content-between. Wrap your content in above classes like below code snippet.
For more alignment options check bootstrap official docs
https://getbootstrap.com/docs/4.6/utilities/flex/#justify-content
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
<div>
<button type="submit" form="selecties"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<button type="submit" form="selecties"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
</div>
</div>
I want to make responsive navbar dropdown that when the website open in mobile the dropdown menu full screen. But when i try to make it to the right with "right: 0" it just go to the right of the toogle button. How to make it go to the right of screen and full screen?. I am use Bootstrap 4
<!-- Grup Tombol -->
<div class="col-6 col-sm-3 col-md-3 col-lg-2 d-flex align-items-center justify-content-end custom-grup-tombol">
<div class="row">
<!-- Chat -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-comments"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Chat -->
<!-- Notif -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Lorem ipsum dolor sit amet consectetur adipisicing elit.</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Notif -->
<!-- User-->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End User-->
</div>
</div>
<!-- END Grup Tombol -->
The Picture
If I understood you correctly, these tips may help:
To make dropdown-menu attached right, you can add the following lines to your style:
.dropdown-menu {
top: calc(2em + 2rem + 2px) !important;
right: 0 !important;
}
.nav-item, .btn-group>.btn, .navbar, div.justify-content-end.custom-grup-tombol {
position: static !important;
}
Also, I recommend you to break a line of the dropdown-items with long text by adding
.dropdown-item {
white-space: normal;
}
I have a bootstrap v.4 navbar with 3 elements in it. The elements are aligned evenly so that the search bar is centred in the navbar. When it collapses it takes full width.
This the html that I have now:
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
Brand
<div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
<form class="mx-2 my-auto d-inline w-100">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-btn">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ion-ios-gear-outline"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<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>
</li>
</ul>
</div>
The problem here is that if I have anything less than w-100, the menu icon is pulled next to the search bar, and I want to it in the right corner, how can I fix that?
What I would like to do is similar to this.
The sizing utils like w-100 are not responsive. Use a column (eg. col-md-3) to set the width instead...
https://www.codeply.com/go/FVo4F81ShR
<nav class="navbar navbar-expand-md navbar-light bg-light">
Codeply
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCodeply">
<form class="mx-2 my-auto d-inline mx-auto col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-btn">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
...
</div>
</li>
</ul>
</div>
</nav>
According to Bootstrap 4 site a navbar with forms should work:
https://v4-alpha.getbootstrap.com/components/navbar/#forms
I use the class="form-inline" and on the same html level the ul-tag with the 3 hypermenu-links.
See this codepen:
http://codepen.io/anon/pen/eWOKXL?editors=1010
HTML
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">my-app</a>
<div class="form-inline my-2 my-lg-0">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-primary">Create</a>
</span>
<select class="form-control">
<option selected >Item AAAAAAAAAAAAAABBBBBBBBBB CCCCCCCCC</option>
</select> <span class="input-group-btn">
<div class="btn-group">
<button class="btn btn-secondary" >Open</button>
<button class="btn btn-secondary" data-placement="bottom" triggers="manual" #p="ngbPopover" [ngbPopover]="popContent"
popoverTitle="Delete?">Delete</button>
</div>
</span>
</div>
</div>
</div>
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item"> <a class="nav-link">link11111111111111</a></li>
<li class="nav-item"> <a class="nav-link">link22222222222222</a></li>
<li class="nav-item"> <a class="nav-link">link33333333333333</a></li>
</ul>
<div ngbDropdown class="justify-content-end d-inline-block">
<button class="btn btn-secondary" id="dropdownMenu1" ngbDropdownToggle>Items</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Item1</button>
<button class="dropdown-item" >Item2</button>
</div>
</div>
</div>
</nav>
Just resize the window and see the 3 menulinks will bleed into the main element with class="form-inline".
How can I fix that? Looking at the BS4 sample I see that first comes the menulinks then the form-inline element. I have it the other way round.
I'd recommend taking out the form-group around the input-group. Make 2 separate input-group-btns instead of the btn-group. Also, remember BS4 is still in alpha so it's not yet a stable release.
http://www.codeply.com/go/jFOUKGF10Z
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">my-app</a>
<div class="form-inline my-2 my-lg-0">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-primary">Create</a>
</span>
<select class="form-control pr-4">
<option selected="">Item AAAAAAAAAAAAAABBBBBBBBBB CCCCCCCCC</option>
</select>
<div class="input-group-btn">
<button class="btn btn-secondary">Open</button>
</div>
<div class="input-group-btn">
<button class="btn btn-secondary" data-placement="bottom" triggers="manual" #p="ngbPopover" [ngbpopover]="popContent" popovertitle="Delete?">Delete</button>
</div>
</div>
</div>
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item"> <a class="nav-link">link11111111111111</a></li>
<li class="nav-item"> <a class="nav-link">link22222222222222</a></li>
<li class="nav-item"> <a class="nav-link">link33333333333333</a></li>
</ul>
<div ngbdropdown="" class="justify-content-end d-inline-block">
<button class="btn btn-secondary" id="dropdownMenu1" ngbdropdowntoggle="">Items</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Item1</button>
<button class="dropdown-item">Item2</button>
</div>
</div>
</div>
</nav>