How to set label size in Bootstrap

Question

I would like to set label size the same as screen size.

f.e. for large screen large label, for small screen small label.

Answer 1

In Bootstrap 3 they do not have separate classes for different styles of labels.

http://getbootstrap.com/components/

However, you can customize bootstrap classes that way. In your css file

.lb-sm {   font-size: 12px; }  .lb-md {   font-size: 16px; }  .lb-lg {   font-size: 20px; } 

Alternatively, you can use header tags to change the sizes. For example, here is a medium sized label and a small-sized label

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <h3>Example heading <span class="label label-default">New</span></h3>  <h6>Example heading <span class="label label-default">New</span></h6>

They might add size classes for labels in future Bootstrap versions.

Answer 2

You'll have to do 2 things to make a Bootstrap label (or anything really) adjust sizes based on screen size:

• Use a media query per display size range to adjust the CSS.
• Override CSS sizing set by Bootstrap. You do this by making your CSS rules more specific than Bootstrap's. By default, Bootstrap sets .label { font-size: 75% }. So any extra selector on your CSS rule will make it more specific.

Here's an example CSS listing to accomplish what you are asking, using the default 4 sizes in Bootstrap:

@media (max-width: 767) {     /* your custom css class on a parent will increase specificity */     /* so this rule will override Bootstrap's font size setting */     .autosized .label { font-size: 14px; } }  @media (min-width: 768px) and (max-width: 991px) {     .autosized .label { font-size: 16px; } }  @media (min-width: 992px) and (max-width: 1199px) {     .autosized .label { font-size: 18px; } }  @media (min-width: 1200px) {     .autosized .label { font-size: 20px; } } 

Here is how it could be used in the HTML:

<!-- any ancestor could be set to autosized --> <div class="autosized">     ...         ...             <span class="label label-primary">Label 1</span> </div>