CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
OunknownO
OunknownO

Reputation: 1196

How to set width of a button bootstrap

How to set custom width of a bootstrap button.

enter image description here

My problem is that I don't know how to shrink width of button to like on the image (it's a submit button). Left part is input text. My problem is button is too wide. Here is the code:

<div class="col-xs-5 col-xs-offset-3">
  <div class="input-group input-group-lg">
    <input type="text" class="form-control input-lg input-forme" id="Text" placeholder="Text">
    <span class="input-group-btn tipka">
      <button type="submit" class="btn btn-group-small" id="form-submit">Submit</button>
    </span>
  </div>
</div>

Upvotes: 2

Views: 33637

Answers (4)

Clinton Dobbs
Clinton Dobbs

Reputation: 601

I used max-width with padding.

HTML

<button type="submit" class="btn custom-btn" id="form-submit">Submit</button>

CSS

.custom-btn {
    max-width: 100%;
    padding-left:25px;
    padding-right:25px;
}

You can also just shortcut the padding.

.custom-btn {
    max-width: 100%;
    padding: 6px 25px;
}

Just adjust the 25px to whatever length you want to get the appropriate size.

Please note that 6px is the standard top and bottom padding for a medium bootstrap button. You will have to adjust accordingly for large and small buttons.

Upvotes: 0

Balvant Ahir
Balvant Ahir

Reputation: 620

You can increase its size with this:

.btn {
    width: 100%;
    padding: 5px;
}

Upvotes: 0

Nvan
Nvan

Reputation: 1146

You can change width and padding : https://jsfiddle.net/wz8ac5d4/

.btn {
    width:0px;
    padding:5px;
}

Also you can add a class to your btn, it is a better practice.

HTML:

<button type="submit" class="btn btn-group-small my-small-btn" id="form-submit">Submit</button>

CSS :

.my-small-btn {
    width:0px;
    padding:5px;
}

Upvotes: 7

Karan Trivedi
Karan Trivedi

Reputation: 33

The classes that define the different sizes are:

.btn-lg .btn-md .btn-sm .btn-xs

refer this link

http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Upvotes: 0

Related Questions