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

User · Answer

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

_x000D_

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

_x000D_

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

User · Answer

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    lt  -- any ancestor could be set to autosized -- gt   lt div class  autosized  gt                                   lt span class  label label-primary  gt Label 1 lt  span gt   lt  div gt

User · Answer

if you have    lt span class  label label-default  gt New lt  span gt    just add the style  font-size XXpx    ej     lt span class  label label-default  style  font-size 15px   gt New lt  span gt

[twitter-bootstrap] How to set label size in Bootstrap

Examples related to twitter-bootstrap

Examples related to label

Examples related to size