Fixed Width Buttons with Bootstrap

Fixed width buttons with Bootstrap

You can also use the .btn-block class on the button, so that it expands to the parent's width.

If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.

<div class="span2">
    <p><button class="btn btn-primary btn-block">Save</button></p>
    <p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

Setting Bootstrap buttons to the same width

The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:

<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>

How can i make buttons the same width

They are wrapping because you have padding on the button. Figure out what your padding is or set it to 0 in your css file. in this example i used 5px as my padding. Then set the utilized calc to set the width to 50% sans the 10px (5 right, 5 left) of padding

.btn {  padding: 5px;  width: calc(50% - 10px);}

<div class="card-body">    <h5 class="card-title">My Linkies</h5>    <p class="card-text">total LINK</p>    <p class="card-text">total linki</p>    <p class="card-text">usd</p>    <a class="card-link text-left">Reward</a>   <a class="card-link" id="myDividends">LINK</a><br>    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>    <button type="button" class="btn btn-primary" name="button"> withdraw</button></div>

How to set width of a button bootstrap

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;
}

Bootstrap input-group, fixed width button

You can achieve this with CSS - the following will target the input group button that is the last child of the input group and apply a width to it.

You should move all your inline styling to a separate (external) CSS sheet which will make the code cleaner and easier to read.

Note the following will apply to all input group buttons in your page so you might want to apply a specific class or id to the parent input group div.

.input-group-btn:last-child {
  width: 100px; // or whatever your desired width is
}

You can also do this with flex

.input-group {
      display: flex;
    }

 .input-group-btn {
      flex-grow:1;
    }

.input-group-btn:last-child {
      flex-grow: 0;
      flex: shrink:0;
      flex-basis: 100px; // or whatever your desired width is
    }

If you want to apply the fixed witdh to the second button then it would be

.input-group-btn:nth-child(2){
      width: 100px; // or whatever your desired width is
    }

Ultimately - if any button could be afffected - you could create a "fixed-width-class" and apply it to the button / s you want affected.

.input-group-btn.fixed-width {
      width: 100px; // or whatever your desired width is
    }

Bootstrap navbar with variable and fixed width buttons?

Here's one way to go: you can create a div outside/after the navbar-nav section for your buttons and conform that section to the navbar.

*I left the collapsible function in place since I image you'll have something for mobile navigation that will have similar elements to work around.

See example

body,html {  margin-top: 75px;}.navbar.navbar-custom {  list-style: none;  background: #444;  line-height: 60px;  margin: 0;  height: 60px;}.navbar.navbar-custom .navi {  display: table;  width: 100%;  list-style: none;  text-align: center;}.navbar.navbar-custom .navi > li {  display: table-cell;  cursor: pointer;}.navbar.navbar-custom .navi > li > a {  text-align: center;  text-decoration: none;  color: #fff;}.navbar.navbar-custom .logo-brand {  margin-left: 15px;  color: #fff;  text-decoration: none;}.navbar.navbar-custom .btn-nav {  text-align: right;}.navbar.navbar-custom .btn-nav .btn.btn-black {  height: 50px;  border-radius: 0;  background: #444;  color: #fff;  border: none;  outline: none;  box-shadow: none;}.navbar-custom .btn-group .dropdown-menu,.navbar-custom .btn-group .dropdown-menu:hover,.navbar-custom .btn-group .dropdown-menu:focus {  left: auto;  right: 0;  border: none;  background: #444;  border-radius: 0;}.navbar-custom .btn-group .dropdown-menu > li > a {  color: #fff;}.navbar-custom .btn-group .dropdown-menu > li > a:hover {  background: #222;}.no-gutter >[class*='col-'] {  padding-right: 0;  padding-left: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-custom navbar-fixed-top">  <div class="container-fluid">    <div class="row no-gutter">      <div class="col-xs-2"><a class="logo-brand" href="#">Logo Brand</a>
      </div>      <div class="col-xs-8">        <ul class="navi">          <li><a href="#">Link 1</a>
          </li>          <li><a href="#">Link 2</a>
          </li>        </ul>      </div>      <div class="col-xs-2">        <div class="btn-nav">          <div class="btn-group" role="group" aria-label="...">            <button type="button" class="btn btn-black">1</button>            <div class="btn-group" role="group">              <button type="button" class="btn btn-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">2 <span class="caret"></span>
              </button>              <ul class="dropdown-menu">                <li><a href="#">Button link 1</a>
                </li>                <li><a href="#">Button link 1</a>
                </li>              </ul>            </div>          </div>        </div>      </div>    </div>  </div></nav><div class="container">  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section    1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,    looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de    Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from    a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College    in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33    of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes    from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32    and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit    amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor    at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from    sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem    ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a    Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem    Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem    Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard    McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable    source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first    line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p></div>

How can I increase the size of a bootstrap button?

You can try to use btn-sm, btn-xs and btn-lg classes like this:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
}

JSFIDDLE DEMO

You can make use of Bootstrap .btn-group-justified css class. Or you can simply add:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    width:50%;    //Specify your width here
}

JSFIDDLE DEMO

Why aren't my Bootstrap buttons full width?

in the email and password input tags include

<input ..... placeholder="Email">

Doing this will put email inside of the text box.

If you do this...

<div class="form-outline mb-4">
    <label class="form-label" for="typePasswordX-2">Password</label>
    <input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
          
</div>

The label will appear above the text box. If you do not want just get rid of the label tag. I recommend leaving it on as it helps with accessibility.

and add a

<br/>

tag between the buttons

Fixed Width Buttons with Bootstrap