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

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

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   x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt h3 gt Example heading  lt span class  label label-default  gt New lt  span gt  lt  h3 gt  x000D   lt h6 gt Example heading  lt span class  label label-default  gt New lt  span gt  lt  h6 gt  x000D   x000D   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

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

Examples related to twitter-bootstrap

Examples related to label

Examples related to size