How to get a responsive button in bootstrap 3 - css

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.

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.

How can I make text not responsive?

I want to have my texts keep all its formatting no matter the size of the screen, however if I were to make the screen small enough it will change its format to fit the screen.
How can I make it so it just stays in its original position and formatting.
<div style="background-color: white; height: 600px; padding: 100px 200px;">
<br><br><br>
<h1 style="font-size: 70px;color:#21ce99;">about me</h1>
<p style="font-size: 20px;color: #0ec998">I'm a Developer and aspiring Entrepreneur <br>from Voorhees, New Jersey in the US.</p>
<p style="font-size: 16px;color: #0ec998">As a young developer, I strive to make complex <br>problems, simple. Combined with my passion <br>for entrepreneurship, I hope to create something<br>that can beneficially impact the world.</p>
</div>
Just add white-space: nowrap; to the container.
JSFiddle demo: https://jsfiddle.net/b2dbyjgx/1/
You could try giving them a minimum width and height by using min-width and min-height properties in your style tags. Make sure not to use relative units of measure such as vh, em, or rems use pixels instead to ignore screen size completely. You should put these properties on the div that surrounds your text.
Simply assign the text you don't want to wrap the CSS' white-space property.
The white-space property specifies how white-space inside an element is handled.
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a < br > tag is encountered.
Now for more of text properties you can refer : W3school White-space
p{
white-space: nowrap;
}
<p>Your desired textYour desired textYour desired textYour desired textYour desired textYour desired textYour desired textYour desired text</p>

Word spacing in Bootstrap button

Wnen I use buttons on my page the word spacing is too large by default.
.btn {
word-spacing: 1px;
}
is it correct to use negative word spacing? It seems to do the trick.
.btn {
word-spacing: -8px;
}
It's a little bit strange that it has this big spacing by default, but maybe it's just a matter of preference.
Twitter Bootstrap (bootstrap.css||bootstrap.min.css) does not set word-spacing on .btn elements.
Inspect the element and see what stylesheet is adding that rule, because I can assure you it is not the default bootstrap.css (as of v3.3.6). You are either using a modified (non-standard) Twitter Bootstrap version or you are loading a different theme/framework on top of it.
And yes, as long as you load your own stylesheet last or you are using a stronger selector than the one that's currently setting the rule, you can override the word-spacing property on .btns (whithout "breaking" anything else).
You are only changing the space between the letters of your buttons. As a sidenote, I recommend using word-spacing: 0;, which will render the font exactly as it has been designed, with proper kerning and ligatures.
Had the same Problem with glyphicons inside bootstrap buttons. My problem was that I did forget to close the glyphicon span. Afterwards it displayed as normal.
Wrong example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope">
Text with spaces
</button>
Working example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope"></span>
Text with spaces
</button>

Bootstrap btn-link vertical alignment slightly out

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.

How do I align text to the middle of an element with CSS in Twitter Bootstrap?

I am using Bootstrap alerts and this is my success alert message:
<div class="alert alert-success" id="UploadSuccess">
<a class="close" data-dismiss="alert">×</a>
<strong>Congrats!</strong> You have successfully did it!.
</div>
And the result is:
As you'll can see that the text alignment is at the top of the <div>. So, how would II align it to the middle?
I have tried using padding-top and vertical-align:middle but neither works (I end up with the same result).
What do I need to do to change the vertical alignment of the text?
Make the line-height of the div the same as the height of the div, eg:
#UploadSuccess { height: 20px; line-height: 20px; }
This will only work if you have one line of text.
Trying to vertically center text text is a common issue. Normally this wouldn't work on normal boxes, but you can force it to work with vertical align:
vertical-align: middle;
display: table-cell;
However this will not work in IE7 and lower.
If you are sure the text you want to display you could use line-height to fake the effect like this:
height: 40px;
line-height: 40px; /* same as height */
This way works cross browser and has support up to IE5.5 I believe. If this is not an option I'm afraid you're out of luck (it can't be done).
As a side note that error message suffers from bad grammar, it should be "Congratulations! You have successfully done it.".
Make it easier ;) ! Try to use alert-block ! That works fine with latest Bootstrap version !
<div class="alert alert-block alert-success" id="UploadSuccess">
<a class="close" data-dismiss="alert">×</a>
<strong>Congrats!</strong> You have successfully did it!.
</div>

Resources