I'm working on a site that uses Bootstrap 3. I need to vertically align a button along the right side of a list item. In an attempt to do this, I am doing the following:
<ul class="list-unstyled list-info">
<li class="ng-binding ng-scope">
<label style="width:initial;" class="ng-binding">First Name Last Name</label><br>
Birthdate
<a ng-click="viewDetails()" class="btn-icon-round btn-icon-round-sm bg-success pull-right" style="vertical-align:middle;"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
How do I vertically center the icon in the right margin of the list item? I will have additional list items. For that reason, I need it in a list. However, I'm not sure how to do that.
Thank you!
One way to make it happen is to do something like this:
<ul class="list-inline">
<li>
<ul class="list-unstyled list-info">
<li class="ng-binding ng-scope">
<label style="width:initial;" class="ng-binding">First Name Last Name</label><br>
Birthdate
</li>
</ul>
</li>
<li>
<a ng-click="viewDetails()" class="btn-icon-round btn-icon-round-sm bg-success pull-right" style="vertical-align:middle;"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
Then pad the link to your discretion
Related
I'm trying to add a div to each item in a Dropdown, however the item looses the bootstrap styling.
CSS
.ul.dropdown-menu li {
display: inline-block !important;
}
HTML
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div>
<a>Item One</a>
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div>
</li>
</ul>
</li>
I've created examples of the dropdown before and after the additional element to demonstrate the issue.
https://jsfiddle.net/Rob_H/nqu621vm/
For continue same style they need a tag as root otherwise you can enhance css
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
</ul>
</li>
Because bootstrap has a styles for .dropdown-menu>li>a but not for .dropdown-menu>li>div so you have to copy the needed styles from bootstrap dropdown and customize it for your needs.
Check the updated JSfiddle.
Hope this helps.
I can add icons next to texts in the menu but fails to hide text (keep icons only) in small screen.
<ul class="nav navbar-nav">
<li>
<a asp-area="" asp-controller="Home" asp-action="Index">
<span class="glyphicon glyphicon-home"></span>
Home
</a>
</li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
Please help! Thanks.
Wrap your text in a div or span or paragraph, like this
<p class="hidden-xs">some text </p>
Wrap each menu item (text, without the glyph icon) in a span with a class of hidden-xs. This will hide the text and only leave the icons when the website is viewed on xs devices.
<span class="hidden-xs">Home</span>
<span class="hidden-xs">About</span>
<span class="hidden-xs">Contact</span>
Working demo on Codepen
Resize window to test it.
I'm creating a small website and I'm stuck with the button alignment problem. I have a navbar list menu and I'd like to add a transparent Logout button near to them just in shape of another menu element, however, I couldn't be successful so far.
Here's a Bootply link you could see the problem; http://www.bootply.com/OXfRkJHEHs
I'd be grateful if you could help me.
<form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a style="color:#900C3F" href="index.php">Home</a>
</li>
<li>
<a style="color:#900C3F" href="festival.php">Festival</a>
</li>
<li>
<a style="color:#900C3F" href="contact.php">Contact</a>
</li>
<li>
<a style="color:#900C3F" href="map.php">Map</a>
</li>
<li>
<input type="submit" value="Logout" class="btn element" style="color:#900C3F; background-color: transparent; margin-top:7px" href="Logout.php">
</li>
</ul></div>
<div id="push"></div>
</form>
I have created a dropdown menu.I want the dropdown lists to display as inline-block or inline table but I can't figure out the right way foundation does it. Any help will be appreciated.
<div class="row column text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
<li>
For Sale()
<ul class="menu">
<!--I want the lists below to display horizontal as opposed to vertical-->
<li>Animals()</li>
<li>Computer-Software()</li>
<li>Computer-Hardware()</li>
<li>Cellphone-accessories()</li>
<li>For Babies-Infants()</li>
<li>Used Cars()</li>
</ul>
</li>
<li>Vehicles
<ul class="menu">
<li>Used Cars</li>
</ul>
</li>
<li>Classes</li>
<li>Real Estate</li>
<li>Sevices</li>
<li>Community</li>
<li>Personals</li>
<li>Jobs</li>
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?