The button with text "Project Howto" is supposed to be inlined with the button with text "Sign In or Register"
I remove the padding padding:0 already but when i inspect it.. padding still appears
<div class="btn-group input-group-btn" style="padding:0;">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style="margin:0px;">
Project HowTo:
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
http://codepen.io/anon/pen/hjAGo
The padding musn't be removed on <div> btn-group input-group-btn but on child <button> btn btn-default btn-lg dropdown-toggle. Then, your padding is removed.
But it still won't be the same height because :
The font size is different
You have two elements in your second button
The only way to force these buttons to share the same height is to give them a specific one :
btn-group.input-group-btn button {
height: 50px;
}
Demo : http://codepen.io/anon/pen/ByIwl
Since the Project HowTo: button has the padding, the button group is giving padding.
Set the following css to btn btn-default dropdown-toggle element:
.input-group-btn:last-child>.btn {
padding: 1.5px 4px;
line-height: 1.45;
}
You can give inline style or add a custom class for that element with the given style to override.
I tried this, and it worked. Added inline style for padding 0.
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style="margin:0px;padding:0;">
Project HowTo:
<span class="caret"></span>
</button>
Related
I am quite new to Bootstrap 4. I am struggling to vertically align some elements on a list-group. It consists on some text on the left side and a dropdown on the right.
<div class="dashboard-blocks">
<ul class="list-group ">
<li class="dashboard-block list-group-item">
<span class="align-middle">Write Article/s</span>
<span class="btn-group float-right">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
ACTION
</button>
<span 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>
</span>
</span>
</li>
On the CSS side I am just applying some styling to the font/colors/borders plus:
.dashboard-block {
...
line-height: normal;
letter-spacing: normal;
...
padding: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
As you can see here "Write Article" is not vertically aligned:
Use flex utility. Due to .float-right it is not allowing to vertically center the span element.
<div class="dashboard-blocks">
<ul class="list-group ">
<li class="dashboard-block list-group-item d-flex justify-content-between align-items-center">
<span class="align-middle">Write Article/s</span>
<span class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
ACTION
</button>
</span>
</li>
</ul>
</div>
Things to do:
Add classes to <li> : .d-flex, .justify-content-between,
.align-items-center
Remove .align-middle and .float-right classes from span(not required).
Sample JS Fiddle: https://jsfiddle.net/srijan1709/apbmgde2/13/
Bootstrap 4 Flex Utility: https://getbootstrap.com/docs/4.0/utilities/flex/
You juste need to add this CSS style to your SPAN
vertical-align:middle;
good luck!
I basically have a button group with one button that is sometimes disabled ("Corpus delicti"). In the case it is disabled I want to show the user an explanation via a popover.
Since disabled elements require wrapper elements I wrapped a div around the button - what messed the styling up.
So I followed Bootstrap's hint "to specify the option container: 'body'" but styling is still messed up.
This is the markup, find it also in this fiddle:
https://jsfiddle.net/7ben7zmg/
<div class="btn-group" role="group">
<button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
<div class="btn-group" role="group">
<div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
</div>
Corpus delicti <span class="caret"></span>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>
Have no clue what I can do. Please help.
Apply data-toggle:popover in the btn-group instead of wrapping in other div..
Wrapping to another div will disturb your layout..
Updated Fiddle
How to make links and buttons be aligned in list using bootstrap?
I need to make them aligned left with reasonable padding.
Can I do it without CSS and my own classes?
<div class="btn-group">
<button type="button" class="btn btn-default btn-icon dropdown-toggle" data-toggle="dropdown">
menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="btn btn-link text-left" href="">
Edit
</a>
</li>
<li class="divider"></li>
<li>
<form action="" method="POST" >
<button type="submit" class="btn btn-link">
Delete
</button>
</form>
</li>
</ul>
</div>
https://jsfiddle.net/63gn7has/
You can overwrite the below CSS class of bootstrap and try this
.dropdown-menu>li>a {
text-align: left!important;
padding: 10px!important;
}
I have a horizontal navigation bar with a four buttons. The third button is a dropdown, however the dropdown is appearing too the far left of the nav-bar, and it should be directly beneath the 'Services' button.
HTML:
<div class="nav dropdown">
<button type="button" class="btn btn-primary col-md-3"> Home </button>
<button type="button" class="btn btn-primary col-md-3"> About Us </button>
<button class="btn btn-primary dropdown-toggle col-md-3" type="button" data-toggle="dropdown">Services <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Residential</li>
<li>Commercial</li>
</ul>
<button type="button" class="btn btn-primary col-md-3">Contact Us</button>
</div>
CSS:
.nav {
background-color: #171818;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #E3E3E3;
height: 60px;
padding-top: 10px;
text-align: center;
}
.nav a:link{
color: #000000;
}
.nav a:visited {
color: #000000;
}
Here is the code to mess around with:
http://www.bootply.com/iSLasxAcEI
So far I have tried to separate the third button into a another individual <div> but it left a gap between the that button and the others, and I have tried to make other alterations to the Bootstrap dropdown classes.
I have been trying to have it drop directly beneath the 'Services' button but have had no avail. Any help would be greatly appreciated!
I am fairly new to using CSS and Bootstrap but if their is anything that I can do to help make the question more clear, please let me know!
I answered this already. Did you delete the previous question?
<div class="nav dropdown">
<button type="button" class="btn btn-primary col-md-3"> Home </button>
<button type="button" class="btn btn-primary col-md-3"> About Us </button>
<div class="btn-group col-md-3" role="group" style="margin: 0px; padding: 0px">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="width: 100%">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<button type="button" class="btn btn-primary col-md-3"> Contact Us </button>
</div>
all you had to do was remove the padding and margin from the btn-group class.
Try below code:
Add below style code to "dropdown-menu" class
position: relative !important;
margin: 47px -264px 0 !important;
"dropdown-menu" class is not mentioned in editor from your link. It is added in a bootstrap file that is not displayed in editor. So apply above code with "!important" inline to "dropdown-menu" class or add it to your custom css file.
I can easily use Bootstrap to create a button dropdown such as the following:
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
content goes here
</ul>
</div>
However, this creates a button and block element (?).
Is it possible to use Bootstrap's button dropdwon to create normal text (best to be inline), clicking on which produces a dropdown?
I am not talking about Bootstrap tooltip. I am hoping to use the dropdown to hold a more complex layout.
Thanks for any idea or suggestion!
So you want a link instead of a button to toggle the dropdown? use this markup:
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
You can add any content here
</ul>
</div>
You can also add
.dropdown {
display: inline-block;
}
To make it appear inline