Resizing Buttons in Twitter-Bootstrap

Resizing buttons in Twitter-Bootstrap

Bootstrap is a great framework, but it doesn't cover everything. It knows that and using its OOCSS principle should be extended to your needs.

If I'm adapting Bootstrap components themselves, I generally create a bootstrap-extensions.css file which houses any extensions of base components, such as an extra large button.

Here's an example implementation of how one extension class adds a new family of buttons to the framework. This example also includes an example use of .btn-block, which is already included in the framework.

CSS:

/**
 * Extra large button extensions. Extends `.btn`.
 */
.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    }

Demo: http://jsfiddle.net/Pspb9/

Bootstrap button not resizing

The problem you are having is because you are using this in your button html

class="btn-block"

There are three default sizes for bootstrap 4 buttons

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

You can also try using css styling for custom sizes

style="width:80px;"

Which you can use like this

<button type="button" class="btn btn-primary" style="width:80px;">Custom button</button>

How to resize carousel control prev/next buttons?

per @koala_dev:

No there's no special class for that, you will need to play around with the css until you get them looking the way you want. height and width will scale the circle, for the arrow you need to adjust font-size and probably line-height

How to make bootstrap buttons full width on resize only

You could use a media query to apply the full width buttons at 768 pixels or less..

@media (max-width: 768px) {
    .btn,.btn-group {
        width:100%;
    }
}

Demo: http://bootply.com/98570

Bootstrap button sizing and alignment

You missed to include the <div class="row"> and <div class="col-lg-*">. Here you go. I have provided the demo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="panel panel-default">  <div class="panel-heading">    <div class="row">      <div class="col-lg-12">        <strong>Myusername</strong>        <div class="btn-group btn-group-sm pull-right">          <button type="button" class="btn btn-danger">Dislike</button>          <button type="button" class="btn btn-success">Like</button>        </div>      </div>    </div>  </div>  <div class="panel-body">    Panel content  </div></div><script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

keeping the same size of two button while resizing screen

You mean like this?

https://jsfiddle.net/gratiafide/wyt8uy0k/

This option would be to set a height and a width to your css for the buttons to make them stop resizing at whatever widths you like. Doing so will override the default Bootstrap height and width values:

 @media (min-width: 768px) {
    #button_add_info {
        background-color:lavender;
        border-radius: 0px;
        text-shadow:none;
        border:none;
        box-shadow:none;
        height:300px;
        width:250px;
    }
}

#button_add_info {
        background-color:lavender;
        border-radius: 0px;
        text-shadow:none;
        border:none;
        box-shadow:none;
        height:200px;
        width:150px;
    }

How to resize a button on a mobile device?

Are you familiar with how media queries are used in Bootstrap Responsive? Below a certain point those buttons are set to 100% width. You just need to override as desired.

http://jsfiddle.net/isherwood/TYNsB/1/

[class*="span"], .uneditable-input[class*="span"], .row-fluid[class*="span"] {
    width: 100px !important;
}

Here I've pounded my override into place with !important, but you should really adjust the media queries to do what you want at various sizes. This is just to get you started.

---

Related Topics