I have some values in a dropdown list but I want to disable some of them.
Here I found a solution like if we add disabled style to <a> it will be disabled. I tried same for dropdown element B but it didn't work.
Help if I am wrong somewhere.
Please find below code snippet for reference,
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item">A</a>
<a class="dropdown-item disabled">B</a>
<a class="dropdown-item">C</a>
</div>
</div>
try it with list items instead. working for me
<ul class="dropdown-menu pull-right">
<li>Normal</li>
<li class="dfgdfgdf disabled">Disabled</li>
<li class="active">Active</li>
<li>Normal</li>
</ul>
Check your lib js and css reference
just add href="#"
It's working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item disabled" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
Related
I have the following some clickable sub list of a button which is in the navbar of the website having some modals in different urls such as url.com/mystock#modal-batch-stock-add.
Navbar button list
<div class="btn">
<a class="btn btn-success dropdown-toggle" data-toggle="tooltip" title="Hooray!" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-plus"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
<a class="dropdown-item" href="#">First Link</a>
<a class="dropdown-item" href="#">Second Link</a>
<a class="dropdown-item" href="#">Third Link</a>
</div>
</div>
A modal example which is in mystock.razor (think of it as just as html typically).
<button type="button" class="btn btn-success" data-toggle="modal" data-backdrop="static" data-target="#modal-batch-stock-add"><!--!--><i class="fas fa-plus"></i> ABCDE-DeMO-MODAL</button>
I wish I open the modals which are in different sub-html files and place them in dropdown-items' hrefs. I thought I would write like a class="dropdown-item" href="url.com/mystock#modal-batch-stock-add" but on the address bar when I enter url.com/mystock#modal-batch-stock-add doesn't retrieve the modal.
I'm trying to design my navbar for my site, to be used in desktop and mobile mode.
I've created a JS Fiddle here
This the html so far:
<div class="container-fluid">
<nav class="navbar navbar-expand-sm navbar-light">
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="row no-gutters ml-auto">
<div class="col-3">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'>
<i class="fas fa-sign-in-alt mr5"></i>
Login
</button>
</div>
<div class="col-6 ml-auto">
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="col-3 text-right">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
I want the right aligned menu items (in the row) to be right next each other (like mr-1 spacing on each item) - but the col class adds spacing in between them in desktop mode. However when the window is smaller I want them to be in cols and nicely spaced out when you drop down the menu. I experimented with flex-rows but no matter what I tried I couldnt get it to work. I'm not sure that putting a row in the navbar was the right way to go. I'm still new to bootstrap4, so Im not really sure the best way to go about this is. Any help appreciated.
Ultimately, this is what I want my menus to look like, but I can't work out how to structure it with BootStrap 4:
In LG:
And XS screen size:
(I couldnt get the Menu 1 to move completely to the right hand side, to align up with Dropdown)
I could do it easily in bootstrap3, but for some reason I'm struggling to get to grips with the way 4 works. It doesnt neccessarily have to be a navbar, if the above can be achieved with just rows and cols, I'd love to hear it.
You could try adding push / pull as shown here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h
That is one option. On your top row you can achieve the result a couple ways, one is to use offfset as shown below. The example uses the medium size, you will need to change it for your particular layout.
<div class="row row-fluid"> // row to be inside of a container
<div class="col-md-2">
Your burger-menu here
</div>
<div class="col-md-2 offset-md-8">
Your burger-menu here
</div>
</div>
Then start a new row for the login search dropdown but still in the same conatiner
<div class="row row-fluid">
<div class="col-md-2">
login code
</div>
<div class="col-md-8">
search code
</div>
<div class="col-md-2">
dropdown code
</div>
</div>
Obviously, as you would in Bootstrap 3, you need to set the columns to work for all different sizes. If the above does not work with your layout then try the push and pull methods to use your current configuration to move the divs into place.
So as I said in the title corners of a bootstrap button are not being rounded and I can't figure out why.
I looked up other posts but none of the found solutions worked for me.
Code (layout.hbs)
...
<!-- navbar-nav -->
<ul class="navbar-nav ml-auto">
<!--Sell Tickets-->
<button type="button" class="btn btn-primary" style="margin-right:20px;">Sell tickets</button>
<!--/Sell Tickets-->
<!-- Currency Dropdown -->
<li class="nav-item dropdown d-none d-md-flex">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <i class="fa fa-caret-down fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCurrency">
<button class="dropdown-item" type="button">USD</button>
<button class="dropdown-item" type="button">EUR</button>
</div>
</li>
<!-- /Currency Dropdown -->
<!-- Search Toggle -->
<li class="nav-item d-sm-none">
<i class="fa fa-search fa-lg"></i>
</li>
<!-- /Search Toggle -->
<!-- Shopping Cart Toggle -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a href="#" class="nav-link" data-toggle="modal" data-target="#cartModal">
<i class="fa fa-shopping-cart fa-lg"></i>
<span class="badge badge-pink badge-count">4</span>
</a>
</li>
<!-- /Shopping Cart Toggle -->
<!-- Notification Dropdown -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownNotif" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell fa-lg"></i>
<span class="badge badge-info badge-count">3</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotif">
<a class="dropdown-item has-icon" href="#"><i class="fa fa-envelope"></i> 1 New Message</a>
<a class="dropdown-item has-icon" href="#"><i class="fa fa-comment"></i> 2 New Comments</a>
</div>
</li>
<!-- /Notification Dropdown -->
...
Here is the website for full code http://ertagon.cf:3000/
Fixed by adding an inline style margin-right:20px
<button type="button" class="btn btn-primary" style="margin-right:20px; border-radius: 8px;">Sell tickets</button>
Thanks, #Chris W
I'm trying to create a navbar header with a logo on the left, search box in the center, and a small menu on the right similar to Reverb's. Here:
I've gotten it pretty close but for some reason, my menu is being pushed down to a second line because my search bar is too long.
I've tried putting in the row and breaking the sections up into smaller col-sm-4 divs, but that messes things up more (FYI, I'm using Bootstrap 4).
Here is my html. Haven't done really any CSS other than change the default colors.
<header class="header">
<nav class="navbar navbar-expand-sm fixed top mb-3">
<div class="container">
<a href="#" class="navbar-brand">
NAVBAR
</a>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
By
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">User name</a>
<a class="dropdown-item" href="#">Member type</a>
<a class="dropdown-item" href="#">Company</a>
<a class="dropdown-item" href="#">Genre</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
</header>
If your goal is to keep the icons to the right of the search from wrapping, then you could try something like this:
ul.justify-content-end {
min-width:200px;
}
I wanted to show a dropdown on click of the img icon but the dropdown is not opening on click, Here is my code.
<div class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li>
<h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>
Your code contains some invalid HTML markup. For example, I assume you mean role="button" instead of type="button" for the anchor element. Also, you should use href="#" or data-target="#" instead of href="javascript:void(0);". You could try this:
<div class="dropdown">
<a href="#" class="dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li><h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>