How to change size of tagsinput #314

okproject opened this Issue Dec 27, 2013 · 4 comments

3 participants


I need to change container size and font size of tags in tags input.
Can you share how to do it please ?


Hello, @okproject. Tagsinput is block element, so you can set width for parent conteiner, or set fixed width in pixels for all .tagsinput's in page. You can do it in your css file:

.tagsinput {
  width: 250px;

Changing font-size of tags(in your css file):

.tagsinput .tag {
  font-size: XXpx;

Include your css file after Flat UI:

  <!-- Loading Flat UI -->
  <link href="css/flat-ui.css" rel="stylesheet">
  <link href="path/to/your-css.css" rel="stylesheet">

Also you do this, by changing files of framework.

// Tags Input
// --------------------------------------------------

.tagsinput {
  background: white;
  border: 2px solid mix(@inverse, @brand-primary, 90%);
  border-radius: @border-radius-large;
  height: 100px;
  margin-bottom: 18px;
  padding: 6px 1px 1px 6px;
  overflow-y: auto;
  text-align: left;
  width: 250px; // - add this line

  .tag {    
    border-radius: @border-radius-base;
    background-color: mix(@inverse, @brand-primary, 90%);
    color: mix(@brand-primary, @inverse, 65%);
    font-size: ceil(@component-font-size-base * 0.933); // ~14px - change this line

After that, you need recompile flat-ui.less using one of this tools; I think this tutorial will be helpful, if you newbie in LESS: Flat UI Pro Tutorial: Setting and Compiling Using LESS


I want to use different size of tags in different areas. So , if i have 2 div content which contains different tags , what should i do ?

I mean

tag 1 , tag 2 etc...
tag x, tag y etc

I need 10 px size on div a content for tags and i need 20ox size on div b content for tags.
Can you share your advice please ?


No answer yet ?


You can create a component which will extend your own classes with bootsrap tagsinput via mixins.

@andrew-ml andrew-ml closed this Oct 3, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment