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>
Related
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.
Okay, so I am a beginner but I've read a decent amount on this situation. But I'm trying to put my brand image in my nav bar.
I know it will be something stupid and small. I can always overwrite the style in the HTML but I'd prefer to have it done in a custom css file.
First things first, getting the obvious out of the way. My custom CSS file is the last css declared in the head. I am able to modify other elements on the page like paragraph element colors, so I know the CSS file is linked properly. I understand specificity, at least the core concept of it.
To try to tackle the specificity issue. I first made a custom id for my so within the tag I declared and in my CSS file I wrote
#logo {
height: 110%;
}
Nothing. So I tried being more specific and adding every single class declaration possible that could point to the logo file.
#logo .nav .navbar .navbar-inverse .navbar-fixed-top .navbar-brand {
...
}
again no luck. I tried just .navbar-brand and every single combination of classes. I just don't understand the hierarchy and who is taking precedence. My CSS file, if listed last in the header, with a properly Specified class declaration should overwrite any of bootstrap's code.
I know this question must get asked a lot but after hours of searching for the answer I haven't found it anywhere.
html snippet of the section
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img id="logo" src="images/logo.png" alt="Limit Magazine">
</a>
</div>
The thing is you are specifying the height in percentage, which requires the high of the parent element to be defined. In Bootstrap 3 the parent element of .navbar-brand is div.navbar-header and it has no defined height. For that reason height: 110%; does not work. So you need to define the height of the logo in pixels or define it in percentage and define div.navbar-header height in pixels.
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.
In Twitter Bootstrap 3, given this glyphicon span:
<span class="glyphicon glyphicon-home"> Home</span>
the word 'Home' is rendered in standard sans serif instead of the font of the parent tag.
How can I assign an arbitrary font family to the text inside the span, and still render the icon correctly?
Of course I could move the text outside of the span, but then the would not be honored, would it? Regardless, from a semantic standpoint it would seem reasonable to keep the text described by the icon inside the span.
Here's an example:
That's how Chrome renders the following:
<h1>
<span class="glyphicon glyphicon-check"></span> Scoring
<span class="glyphicon glyphicon-home"> Home</span>
</h1>
The first span is how I want it to look, but is semantically wrong (IMOHO), while the second looks just wrong.
Since the icons are inserted using the :before pseudo-element you can make it so that the glyphicon font only applies to that instead of the actual element:
.glyphicon {
font-family: inherit;
}
.glyphicon:before{
font-family:'Glyphicons Halflings';
}
Demo fiddle
Like this
<span class="glyphicon glyphicon-home"> home</span>
Maybe not the most semantic solution, but it is super easy and works.
Wrap the whole darn thing in a span with nowrap.
HTML
<span class="nobr">
<span class="glyphicon glyphicon-check"></span> Scoring
</span>
CSS
.nobr {
white-space: nowrap;
}
I have this pure-CSS (display) solution for a follow button:
<span class="follow-status following">
<a href="#" class="btn btn-follow" data-user-id="123">
<span class="following-text"><i class="icon-ok"></i> Following</span>
<span class="follow-text"><i class="icon-plus"></i> Follow</span>
<span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
</a>
</span>
I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward.
- Should I overwrite the A padding and shift it into the span?
- Should I write the HTML differently?
- Should I just toggle applicable text/style by JS?
- Something else?
you can see the outer span has the class "following"
.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}
how would you accompliush that within the twitter bootstrap confines?
Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.