Updated March 8, 2023
Introduction to Bootstrap Command
Bootstrap is front end framework for the development of web applications. It provides the ability to create responsive designs. There are many bootstrap commands that include HTML and CSS, and other templates as well. There are some commands which are listed below
Basic Bootstrap commands
The basic commands are as follows:
1. Alert-primary
It is being used as below for getting the alert message
<div class="alert alert-primary" role="alert">
<strong>Hello World! </strong>
</div>2. Alert-info
<div class="alert alert-info" role="alert">
<strong>Heads up! </strong>
</div>3. Alert-warning
It is being used as below for getting the alert warning
<div class="alert alert-warning" role="alert">
<strong>Warning! </strong> Please check it.
</div>4. Badge
<h1>Hello world <span class="badge badge-secondary">New</span></h1>
<h2>Hello world <span class="badge badge-secondary">New</span></h2>
<h3>Hello world <span class="badge badge-secondary">New</span></h3>
<h4>Hello world <span class="badge badge-secondary">New</span></h4>
<h5>Hello world <span class="badge badge-secondary">New</span></h5>
<h6>Hello world <span class="badge badge-secondary">New</span></h6>5. Badge-primary
<span class="badge badge-primary">Identity</span>6. Badge-success
<span class="badge badge-success">Success</span>7. Badge-info
<span class="badge badge-info">Info</span>8. Bread-crumb
To go from the one directory to other like Root, Root/Application, and so on
<nav aria-label="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Root</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Application</li>
</ol>
</nav>9. Btn-primary
<button type="button" class="btn btn-primary">Primary</button>10. Btn-info
<button type="button" class="btn btn-info">Info</button>Intermediate Bootstrap commands
The intermediate commands are as follows:
11. Form-group
<form>
<div class="form-group">
<label for="formGroupInput">Name label</label>
<input type="text" class="form-control" id=" formGroupInput" placeholder=" Name label ">
</div>
</form>12. Form-inline
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInput" placeholder="TOM Curran">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>13. Form-control
<input class="form-control" type="text" placeholder="Default">14. Form-check
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>15. Read-only
<input class="form-control" type="text" placeholder="Input would be here--" readonly>16. Input-group
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Adding on left</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">Right addon</span>
</div>
</div>17. Checkbox
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>18. Radio
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>19. Dropdown
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>20. Segmented-button
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>Advanced Bootstrap Commands
The advanced commands are as follows:
21. Jumbotron
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple jumbotron-style component.</p>
<hr class="my-2">
<p>It uses utility classes for typography and
spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#!" role="button">Some action</a>
</p>
</div>22. List-group
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>23. Media
<div class="media">
<img class="d-flex mr-3" data-src="Script.js/64x64?theme=sky" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Put the content for display
</div>
</div>24. Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>25. Dropdown
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
</div>
</div>26. Pagination
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#!" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item">
<a class="page-link" href="#!" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>27. Popover
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="top"
data-content="Hello World.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="right"
data-content=" Hello World.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content=" Hello World.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="left"
data-content=" Hello World.">
Popover on left
</button>28. Progress
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
</div>Tips or Tricks to Use Bootstrap Commands
- Use the class properly for the requirement.
- Try to be precise while selecting the values and fields.
- Make sure it should be smaller in size and efficiency.
- Bootstrap helps in making the content more attractive with less code.
Conclusion
Bootstrap combines with HTML and CSS based design templates and other javascript plugins. Its CSS can work on multiple devices like tablets, phone, and desktop. It is being widely used for developing web applications. It is getting popular among the developers because of its usage and flexibility provided. The individual who knows HTML and CSS can easily work on bootstrap.
Recommended Articles
This has been a guide to Bootstrap Commands. Here we have discussed concept, basic, intermediate as well as advanced Bootstrap Commands along with tips and tricks to use effectively. You may also look at the following article to learn more –
