Last time, I talked about what Bootstrap is and how to use it, but if you haven’t read that blog, go to this link: https://www.nucleiotechnologies.com/how-to-use-bootstrap/
Today we will talk about one of the HTML tags, the “<button></button>“, and how we create a button using Bootstrap.
What is a <button> tag?
Using the <button> tag, you can define a clickable button. Text (including tags like <i>, <b>, <strong>, <br>, <img>, etc.) can be included inside a “button” element. If you want to know more details about <button> tag, go to W3Schools.
Creating a button using bootstrap
1. Open your HTML file.
2. Go to the Bootstrap website. Then go to the documentation labeled as “Docs”. Scroll down the sidebar, then click the “Button” under the “Components”.
There, you will see several predefined button styles.
3. Copy some codes, then paste them in your HTML file.
<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>Link of the code: Buttons · Bootstrap v5.2 (getbootstrap.com)
4. Save your file, then run it.
You can also disable it, resize it, and make your button look neat by making it merely an outline. All you have to do is copy the codes on the website and paste them in your HTML file.
<button type="button" class="btn btn-outline-primary">Primary</button>
<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" disabled>Primary button</button>Link: Buttons · Bootstrap v5.2 (getbootstrap.com)
I hope this was helpful. Thank you very much!