Upon clicking the 'Gmail' (with arrow next to it), menu options such as 'Contacts', 'Tasks' show up.
Is there a similar component in bootstrap? or any other plugin to achieve the same?
Are you thinking of something like this? http://cdpn.io/BqHfm
It's based on the Bootstrap Dropdown
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Mail <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Mail</li>
<li>Contacts</li>
<li>Tasks</li>
</ul>
</div>
Good luck!
Related
I am trying to create a dropdown list in the navbar that matches the style of the rest of the navbar. I have not overwritten any of the bootstrap classes to my knowledge and I am wondering if there are any classes that have the same styling for a dropdown list.
I have been looking through other articles and most seem to just use a random class and it works correctly. I tried to make a custom CSS class for it but I was unable to successfully match the header.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Management
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("Index", "Management")">Statistics</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "Production")">Production Lines</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "Announcement")">Announcements</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "TestStation")">Test Stations</a>
</div>
</li>
When creating a dropdown list, is there a special class to use that matches the navbar or do I have to create a custom one?
dropdown-item background color in bootstrap is white and if you want change it you can change it in your page style. you can add this code to your head tag:
.dropdown-item{
background-color: #2e89e5;
color: #fff;
}
Assuming your nav-bar uses the primary color you can give the dropdown the bg-primary class to give it the primary color background (https://getbootstrap.com/docs/4.0/utilities/colors/#background-color)
It's possible your going to have to assign this class to all the ul items individually
Change the styling of the .dropdown-menu class in your style sheet in bootstrap 4.1.3.
I use materializecss and want to implement dropdown in floating button with icon inside.
Here is the markup:
<a href="#" class="dropdown-button btn-floating btn-sm waves-effect waves-light" :data-activates="'dropdown_' + order.id">
<i class="small material-icons">more_horiz</i>
</a>
<ul :id="'dropdown_' + order.id" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
Which is basically the same as in docs, however instead of simple button I use floating button and an icon inside. Without <i> it works fine, however with <i> I got display: none; for the dropdown.
How can I fix this?
update
Worked for me after updating to 0.98.2
I am not very adept at styling websites and have trouble with css and responsive design. As such, at the suggestion of a co-worker, I've decided to give the Bootstrap toolkit a try and so far I've been very happy with it. However, I am having trouble understanding a few things about the navbar components of the kit and so far have been unsuccessful in customizing this portion of the templates.
One of my sources of confusion stems from the pervasive inclusion of a toggleable button for collapsing the navigation bar. It seems like no matter what example they show of the navigation bar, they've included the collapse classes and toggle button, even where that button doesn't appear to be displayed anywhere and the navigation bar is not collapsed. For example, take a look at the following link: http://getbootstrap.com/examples/navbar-fixed-top/
If you view the source here, there you see the button and the collapse classes, but the navbar is missing said button and it is not collapsed. When I view the CSS I do see that it has display: none; specified, but then why include it at all?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Finally, I believe this issue is interrelated to the second issue I'm having, which is, I am trying to right justify the links of my customized navbar with the navbar-right class, but when I do so, the links don't move to the right. Does this have something to do with my removal of the toggle button and collapse classes? Here is my attempt which has failed miserably. I am using the base jumbotron template and have included the jumbotron and min bootstrap css files. The jumbotron css file is very minimal and only includes some body stylings for a margin and a color, I believe. I can't see where that would be preventing my navigation links from showing up on the side.
Instead, the image appears on the left, and the links appear just below it, with no styling whatsoever, just a jammed together list of links. The dropdown does not work because I was experimenting with a different method used on the angular site by specifying the uib-dropdown so I should mention that - the dropdown portion was working when I had the bootstrap classes and attributes specified.
For a jsfiddle example of what is happening when I attempt to get the links to show up on the right: https://jsfiddle.net/1jehsp5r/
In fact, I have yet to find a single working example of the right alignment in the navbar. I have re-done this code about 10 times now and not a single combination of classes and divs have yeilded a simple fixed top navigation bar with an element on the left and a set of links on the right. Take this tutorial for example: https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm - They have a screenshot of it working, but when you click the "try-it" button and it loads into an interactive screen, their OWN example doesn't even work right. Everything aligns on the left, which is exactly what I am experiencing.
Can anyone show me the right way of simply making a simple navigation bar similar to the one here: https://angularjs.org/
For the collapse button, it is set to appear in small screen for most of the cases. It's there for responsiveness (or the art of display well on all screen size).
Here is an example of collapse button : Bootstrap navbar external-content
To align items on the right side of the row, you could use the ml-auto (margin-left: auto;) class on the <ul> element.
Here is an example of a bootstrap navbar with links align on the right side.
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Hope it helps.
EDIT :
Those examples was build for Bootstrap 4 alpha 6.
i use bootstrap 3 and i try to display a button group with a submenu.
i use bootstrap-submenu
i created the menu
http://jsfiddle.net/L8kbaqw3/
<div class="btn-group">
<button class="btn btn-primary" type="button">Actions</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a tabindex="0">Annuler</a></li>
<li><a tabindex="0">Sauvegarder</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="0">Payer</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Comptant</a></li>
<li><a tabindex="0">Débit</a></li>
<li><a tabindex="0">Carte de crédit</a></li>
<li><a tabindex="0">Carte cadeaux</a></li>
<li><a tabindex="0">Chèque</a></li>
</ul>
</li>
</ul>
</div>
</div>
that work fine.
but when i try to add something under it, i don't see all the menu
http://jsfiddle.net/hxnznnz6/
it's seem like something block it to display completly the menu.
Also if you compare the layout of the two button, it's different
Edit
i removed the first btn-group like #Eduardo Arruda Pimentel said.
look ok, but the sub menu of Payer is not displayed when i click on it
New result
http://jsfiddle.net/wn9u5z28/
1)Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. As you can see in these two links:
Bootstrap 3 dropdown sub menu missing
Responsive multilevel menu with Bootstrap 3
2) The reason for the different layout is that the code is different. To solve that, just recode and delete this part of line 3:
class="btn-group"
I am currently using the CSS bootstrap 3.2 in my application.
I am trying to place 2 drop down menu "with the arrow only- not button style" next to each other and then to the right I want to add a search bar.
I want to use the the dropdown menu that the bootstrap has but without the button style "arrow only" and a small search bar to the right in the vertical center.
I have tried to do that but the dropdown menus and the search bar do not line up.
here is a screenshot of what I have done
and here is my code
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li role="presentation" class="divider"></li>
<li>Logout</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Company Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a class="master_client_change" href="#" id="current_client_id_2">Comp 1</a></li><li><a class="master_client_change" href="#" id="current_client_id_1">Comp 2</a></li><li><a class="master_client_change" href="#" id="current_client_id_3">Comp 3</a></li><li><a class="master_client_change" href="#" id="current_client_id_6">Comp 4</a></li></ul>
</li>
</ul>
<div class="width-sm-size box-inline-block">
<form action="/accounts_search.php" method="get" id="searchforactivities" class="navbar-form navbar-right row-right-xxsm-margin" role="search">
<div class="input-group">
<input type="search" class="form-control" name="search_term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</form>
</div>
How can I get the dropdown menu and the search bar to line up?
and is there a trick in making the search bar little fancy by making the the corners of the input round and the Go button a search icon?