I have text in a paragraph with a button a element:
<p>
<a class="btn btn-default" href="#">Take exam</a>
<span class="text-muted">Available after reading course material</span>
</p>
However, this renders with the two not vertically aligned.
What is the best way to align the text baseline here?
Fiddle at http://jsfiddle.net/0j20stbh/
Using the same styling as the .btn would probably be a good approach. Example with disabled .btn
<p>
<a class="btn btn-default" href="#">Take exam</a>
<span class="text-muted btn" disabled="true">Text</span>
</p>
Or make a class of .btn-align with the same attributes. Example
CSS
.btn-align {
padding: 6px 12px;
line-height: 1.42857143;
vertical-align: middle;
}
HTML
<p>
<a class="btn btn-default" href="#">Take exam</a>
<span class="text-muted btn-align">Available after reading course material</span>
</p>
In Bootstrap 4, you can do this using utilities to set display: inline-block and vertical-align: middle in case you don't want to create a special CSS class for it.
<p>
<a class="btn btn-outline-secondary" href="#">Take exam</a>
<span class="text-muted d-inline-block align-middle">Available after reading course material</span>
</p>
Example
Related
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }
all btn's - in a line (http://bootply.com/100575)
when I add hidden-xs into btn-group, it make new line break. (http://bootply.com/100574)
I changed codes but I can not find how to make btn's in a line with hidden-xs.
<div class="btn-group">
<a class="btn btn-default" href="./board.php?bo_table=qna&page=1"><i class="fa fa-list"></i>List</a>
</div>
<div class="btn-group">
<a class="btn btn-default" href="./write.php?bo_table=qna"><i class="fa fa-edit"></i>Write</a>
</div>
<div class="btn-group hidden-xs"> <!-- here... -->
<a class="btn btn-default" href="javascript:select_delete();">Delete</a>
<a class="btn btn-default" href="javascript:select_copy('copy');">Copy</a>
<a class="btn btn-default" href="javascript:select_copy('move');">Move</a>
</div>
The default styling of .hidden-xs is:
.hidden-xs {
display: block!important;
}
Changing it to display:inline-block will solve this.
.hidden-xs {
display: inline-block!important;
}
In this instance, usage of !important would be necessary since you are having to overwrite the initial declaration which uses !important. Alternately just change the bootstrap CSS to inline-block and avoid having to overwrite it.
I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:
The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?
http://bootply.com/74652
Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
</button>
Demo
This works in Bootstrap 4 with Font Awesome icons like so
<button class="btn btn-default" style="vertical-align: middle;">
<i class="fa fa-times"></i> Centered
</button>
Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.
For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
This should also work for icons not in buttons, e.g. tabs.
Try vertical-align: middle; on .glyphicon-th:before
None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.
.vcenter * {
vertical-align: middle;
display: inline-block;
}
.btn i {
margin-left: 10px;
font-size: 20px;
}
with
<div class="vcenter">
<button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>
See http://www.bootply.com/UbY78zM8pD for live example.
I managed to do it like this:
.glyphicon.center:before {
vertical-align: middle;
}
and use <span class="glyphicon center glyphicon-th"></span>.
Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).
I managed to get mine working as follows:
HTML
<div class="col-xs-12">
<a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
<span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
</a>
</div>
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
please increase or decrease the font size according to your requirement
Other way
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.
CSS:
.someWrapperClass button span {
margin-top: 120%;
}
HTML:
<div class="someWrapperClass">
<button type="button" ng-click="SomeMethod()">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x).
This code will make my glyphicons big:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-th-list">
</span>
</button>
How can I get this size without using the btn-lg class while using only a span ?
This gives a small glyphicon:
<span class="glyphicon glyphicon-link"></span>
You can just give the glyphicon a font-size to your liking:
span.glyphicon-link {
font-size: 1.2em;
}
Here's how I do it:
<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
This allows you to change size on the fly. Works best for ad hoc requirements to change the size, rather than changing the css and having it apply to all.
The .btn-lg class has the following CSS in Bootstrap 3 (link):
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
If you apply the same font-size and line-height to your span (either .glyphicon-link or a newly created .glyphicons-lg if you're going to use this effect in more than one instance), you'll get a Glyphicon the same size as the large button.
<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>
<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>
In my case, I had an input-group-btn with a button, and this button was a little bigger than its container. So I just gave font-size:95% for my glyphicon and it was solved.
<div class="input-group">
<input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
<div class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
</button>
</div>
</div>
Write your <span> in <h1> or <h2>:
<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
If you are using bootstrap 3, use tag, like this <small><span class="glyphicon glyphicon-send"></span></small> It works perfect for Bootstrap 3.
You can even use multiple <small> tags to set the size more smaller.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>
I'm using twitter bootstrap.
I'm trying to create a button with dropdown that should be displayed right after a text.
The button and everything are created but it appears on the next line instead of being on the same line as my texte.
This is more or less the code:
<h1> Some title
<div class="btn-group" xmlns="http://www.w3.org/1999/html">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> ...my menu's...</li>
</ul>
</div>
</h1>
The h1 tag has no special positioning assigned. I've tried to add a float: left to the h1 tag but it doesn't work because there is a clear:both in the btn-group's css.
What's wrong? Thx!
UPDATE:
I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.
I don't really know how you got that markup, but here is a working version : (demo on jsfiddle)
<h1> Some title
<small>
<span class="btn-group">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>...my menus...</li>
</ul>
</span>
</small>
</h1>
h1 .btn-group { display: inline-block; }
I only suggest you to use the <small> tag, because it sets some different styles from <h1>. But it is not required for this to work.