Change Button Color Bootstrap Lg Btn Block

Bootstrap contains a handy CSS component for buttons.

In this tutorial, I will show you how to use Bootstrap 4 buttons to build and style your website more easily and quickly.

HTML elements

The button classes are designed to be used with the<button>,<a> or<input> elements.

---

Button classes

Base buttons and their colours

Bootstrap includes nine base button styles, each of them serving its own semantic purpose.

The buttons have a white-coloured text and a background based on the btn-[colour] class that's used along with the btn class. E.g., btn-primary creates a button with a primary background, btn-success with a green background, etc.

When you use a special btn-link class, the button will look like a text link with padding. I usually use these buttons for secondary actions like "Go back".

          <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>        

Outline buttons

Bootstrap 4 comes also with the outline (ghost) buttons, for cases you would need more subtle buttons without the strong background colours.

To create the outline button, replace the default button-modifier class with the .btn-outline-*  variant.

All possibilities for the outline buttons are shown below.

          <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>        

---

Button sizes

Small and large

You can very easily change button size by addingbtn-lg orbtn-sm class to it. These classes modify button's padding and also the font size.

          <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button>        

Block buttons

Add btn-block class to the button to create a block button that that span the full width of its parent.

          <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>        

---

Active and disabled buttons

Active buttons

Buttons, when used with <button> element, will appear pressed (i.e., with a darker background and darker border) automatically when active.

When using button classes on <a> element, you will need to .active class to it to achieve the same.

Disabled buttons

To disable a button if you're using a <button> element, add a disabled attribute to it.

When you are using a <a class="btn">, simply add .disabled class to to the button as in the example below.

See it live

See the Pen Bootstrap buttons: active and disabled classes by Ondrej (@ondrejsvestka) on CodePen.

---

Aligning Bootstrap buttons

You can nicely align Bootstrap buttons using Bootstrap utility classes on button's parent.

Align button to the left

Use text-left utility class to align the Bootstrap button to the left.

          <div class="text-left">     <a href="#" class="btn btn-primary">Left align</a> </div>        

Center Bootstrap Button

Use text-centerutility class to centre the Bootstrap button.

          <div class="text-center">     <a href="#" class="btn btn-primary">Center align</a> </div>        

Align button to the right

Use text-right utility class to align the Bootstrap button to the right.

          <div class="text-right mb-3">     <a href="#" class="btn btn-primary">Right align</a> </div>        

See it live

See the Pen Bootstrap Buttons: Align - Left, Center, Right by Ondrej (@ondrejsvestka) on CodePen.

---

Bootstrap Button group and Toolbar

Button group

To create a nice-looking group of buttons, wrap them into a.btn-group parent element.

Also, you can use Bootstrap JavaScript plugins to turn the button group into a Radio button.

          <div class="btn-group" role="group" aria-label="Button group example">   <button type="button" class="btn btn-primary">Left</button>   <button type="button" class="btn btn-primary">Middle</button>   <button type="button" class="btn btn-primary">Right</button> </div>        

Button Toolbar

To create a toolbar, wrap more button groups into a .btn-toolbar.

No spacing is added automatically between the button groups. To add some spacing to your toolbar, use Bootstrap spacing utilities.

          <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">   <div class="btn-group mr-2" role="group" aria-label="Button group example">     <button type="button" class="btn btn-outline-secondary">B</button>     <button type="button" class="btn btn-outline-secondary">I</button>     <button type="button" class="btn btn-outline-secondary">U</button>   </div>    <div class="btn-group" role="group" aria-label="Button group example">     <button type="button" class="btn btn-outline-secondary">L</button>     <button type="button" class="btn btn-outline-secondary">R</button>     <button type="button" class="btn btn-outline-secondary">T</button>   </div> </div>        

See it live

See the Pen Bootstrap buttons: button groups and toolbars by Ondrej (@ondrejsvestka) on CodePen.

---

Bootstrap Radio Button

Bootstrap'sbutton styles can be applied to other elements, such as<label>s, to provide checkbox or radio style button toggling.

Adddata-toggle="buttons" to a.btn-group containing these modified buttons to enable their toggling behaviour via JavaScript and add.btn-group-toggle to appropriately style the<input>s within your buttons.

Note that pre-checked buttons require you to manually add the.active class to the input's<label> and also the checked attribute to the input itself.

          <div class="btn-group btn-group-toggle" data-toggle="buttons">   <label class="btn btn-primary active">     <input type="radio" name="options" id="option1" autocomplete="off" checked> Active   </label>   <label class="btn btn-primary">     <input type="radio" name="options" id="option2" autocomplete="off"> Radio   </label>   <label class="btn btn-primary">     <input type="radio" name="options" id="option3" autocomplete="off"> Radio   </label> </div>        

See it live

See the Pen Bootstrap buttons: Radio button by Ondrej (@ondrejsvestka) on CodePen.

---

Special & custom buttons

A custom file upload button

Bootstrap 4 contains a nicely styled custom file upload button, but you can also create a completely custom button that launches file browser to select a file upload quite easily.

See more on this topic, including examples, in my Bootstrap 4 file upload snippet.

Bootstrap circle buttons

With a bit of custom CSS styling, you can also create custom Bootstrap 4 circle buttons. See more in my snippet.

Change Button Color Bootstrap Lg Btn Block

Source: https://bootstrapious.com/p/bootstrap-buttons

Share this post