Bootstrap btn-link vertical alignment slightly out - css

When placing a Bootstrap 3 button with class btn-link in a block of text, the vertical alignment seems to be out by a few pixels:
<div>Foo<button class="btn btn-link">Button</button>Bar</div>
Fiddle
How can I fix this? Removing the padding from the button improves the issue somewhat, but I'm still seeing a discrepancy of a few pixels.

The best way to fix this would be to wrap the text nodes with <span> elements and then modify the vertical-align property:
Updated Example
div span {
vertical-align: middle;
}
<div>
<span>Foo</span>
<button class="btn btn-link">Button</button>
<span>Bar</span>
</div>

If you don't want to (or can't) wrap all non-button items within <span>'s, a simpler approach may be to change the btn-link's vertical-alignment from middle to baseline.
.btn-link { vertical-align: baseline; }
Quoting from CSS-Tricks.com: "What is Vertical Align?"
The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don't line up with the lowest point of the descenders, that isn't the baseline.

Related

How to make a full width Bootstrap button responsive? [duplicate]

I am using bootstrap 3 and I have the following html:
<div class="col-sm-2" >
<a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>
On a small screen, the text "Create New Board" is too long to fit on the button. I would like the text to wrap on to another line and the height of the button to increase to fit the text. Any tips on how to do this?
In Bootstrap, the .btn class has a white-space: nowrap; property, making it so that the button text won't wrap. So, after setting that to normal, and giving the button a width, the text should wrap to the next line if the text would exceed the set width.
#new-board-btn {
white-space: normal;
}
http://jsfiddle.net/ADewB/
I know this already has a marked answer, but I feel I have an improvement to it.
The marked answer is a bit misleading. He set a width to the button, which is not necessary, and set widths are not "responsive". To his defense, he mentions in a comment below it, that the width is not necessary and just an example.
One thing not mentioned here, is that the words may break in the middle of a word and look messed up.
My solution, forces the break to happen between words, a nice word wrap.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
For anyone who may be interested, another approach is using #media queries to scale the buttons on different viewport widths..
Demo: http://bootply.com/93706
In some cases it's very useful to change font-size with relative font sizing units. For example:
.btn {font-size: 3vw;}
Demo:
http://www.bootply.com/7VN5OCVhhF
1vw is 1% of the viewport width. More info: http://www.sitepoint.com/new-css3-relative-font-size/
<button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button>
We can use btn-block for automatic responsive.

Weird line-break in span

For some reason, the following HTML snippet wraps the % sign onto a new line (FireFox only):
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
<br />
</span>
</span>
And css:
.label {display: inline-block;}
Its a snippet, so it doesn't make much sense on its own, but I don't understand why this is happening, I think its valid HTML5. Can someone explain what the problem is with this snippet, because it works in Chrome and not in FireFx ?
DEMO
Adding white-space:nowrap; should fix it:
.label {
background-color: yellow;
display: inline-block;
white-space:nowrap;
}
jsFiddle example
Firefox renders this incorrectly.
Inline blocks should use the shrink-to-fit algorithm:
calculate the preferred width by formatting the content without
breaking lines other than where explicit line breaks occur,
calculate the preferred minimum width, e.g., by trying all possible
line breaks.
find the available width: in this case, this is the width of the
containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
Then the shrink-to-fit width is:
min(max(preferred minimum width,available width), preferred width)
In this case:
preferred width is the width without any word wrapping.
preferred minimum width is the width of the widest element, in this case "1,22."
available width is the width of the document body, in this case 100%.
min(max(preferred minimum width,available width), preferred width) should therefore be equal to preferred width.
You can fix Firefox's behavior by changing your HTML or by using white-space:nowrap.
But I have another alternative: br is an inline element, but changing it to a block element fixes the problem.
Doing so shouldn't have an impact on any other br elements in your HTML (that I can think of).
Fiddle
What's happening is Firefox is interpreting your second span as being inline with the <br/> element. Try putting the <br/> element outside of the span wrapping the 2 spans like so:
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
</span>
<br />
</span>
http://jsfiddle.net/gc0sq29k/12/

How to get a responsive button in bootstrap 3

I am using bootstrap 3 and I have the following html:
<div class="col-sm-2" >
<a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>
On a small screen, the text "Create New Board" is too long to fit on the button. I would like the text to wrap on to another line and the height of the button to increase to fit the text. Any tips on how to do this?
In Bootstrap, the .btn class has a white-space: nowrap; property, making it so that the button text won't wrap. So, after setting that to normal, and giving the button a width, the text should wrap to the next line if the text would exceed the set width.
#new-board-btn {
white-space: normal;
}
http://jsfiddle.net/ADewB/
I know this already has a marked answer, but I feel I have an improvement to it.
The marked answer is a bit misleading. He set a width to the button, which is not necessary, and set widths are not "responsive". To his defense, he mentions in a comment below it, that the width is not necessary and just an example.
One thing not mentioned here, is that the words may break in the middle of a word and look messed up.
My solution, forces the break to happen between words, a nice word wrap.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
For anyone who may be interested, another approach is using #media queries to scale the buttons on different viewport widths..
Demo: http://bootply.com/93706
In some cases it's very useful to change font-size with relative font sizing units. For example:
.btn {font-size: 3vw;}
Demo:
http://www.bootply.com/7VN5OCVhhF
1vw is 1% of the viewport width. More info: http://www.sitepoint.com/new-css3-relative-font-size/
<button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button>
We can use btn-block for automatic responsive.

vertically center span (bootstrap label) together with other elements

I'd like to use the inline labels of the bootstrap css framework:
<span class="label">Default</span>
Unfortunately these labels are not vertically centered when used together with other elements.
<p>
<span class="label">test</span>This is a test heading.
</p>
Please see the full code for a visual example: http://jsfiddle.net/kvPpm/
I am aware of the line-height and absolute/relative positioning workarounds but was not able to apply them correctly.
How can I vertically center these labels?
Since <span> is an inline element by default you can just do:
span { vertical-align: middle|top|bottom; }
And it should work. http://jsfiddle.net/kvPpm/1/
But then <a> inside <span> is not semantically correct. You can just use <a> and style it display: inline.
http://jsfiddle.net/kvPpm/3/
.label { vertical-align: top; }
This worked for me when I wanted it to be aligned properly in a ul

Aligning divs with different dimensions horizontally

I have a tag cloud with different font sizes.
<div>
<a style="font-size:15px;">tag1</a>
<a style="font-size:10px;">tag1</a>
</div>
And it looks like this:
alt text http://img69.imageshack.us/img69/5120/49274398.gif
Now I need to wrap each tag into its own div:
<style>
.cloud {float:left}
.tag {float:left}
</style>
<div class="cloud">
<div class="tag"><a style="font-size:15px;">tag1</a></div>
<div class="tag"><a style="font-size:10px;">tag1</a></div>
</div>
Which puts them all over the place. How to make them look like on the first picture?
alt text http://img26.imageshack.us/img26/7355/12644278.gif
UPDATE: Here is how it looks if I set fixed height for the .tag:
alt text http://img710.imageshack.us/img710/3385/59552565.gif
Replace
.tag {float:left}
by
.tag {display: inline}
Or was there some other reason why you were floating all the tags?
Perhaps increase the line-height or vertical padding of the smaller font-sizes. The reason it's happening is because the smaller ones are wrapping around the larger ones as designed in the specification, so by increasing the size of the area of the smaller elements, the wrapping should be prevented.
As an aside, is there any need to float the tags in the first place? Just putting them all in a row as normal in your first example would seem to have the same effect.

Resources