Web Dev Series 5 - Bootstrap Important Components.

Alerts

Alerts are used for giving alerts like if you want that if a user clicks on a button and you want to show an alert so that time you can use it for it but you have to add the JS or jQuery by yourself you can only use the design of the alert and the code of a basic alert is here <code><div class="alert alert-primary" role=" alert">A simple primary alert—check it out!</div></code>.

Buttons

In bootstrap you can create a button by just giving an anchor tag and then adding a class called btn btn-primary and the code will look like this Ex - <a href=""class="btn btn-primary">Button</a>.

Carousel

The carousel is a slider in bootstrap there are four carousels in bootstrap 5 the first one is a simple auto slide that moves automatically and it doesn't have previous and next buttons, the second one is also an automatic slider but it has previous and next button. So that the users can use move slides through that buttons. And the code for a basic carousel is here

<code>

</code>

Spinners

Spinners in bootstrap are simple preloader designs you can use this for adding preloaders on your website but it also has the same case as the first one you have to add JS or jQuery by yourself only and the code of a basic spinner is here <code><div class="spinner-border text-primary" role=" status"><span class="visually-hidden">Loading...</span></div></code>

Breadcrumb

It's used to see which page you are on is a Homepage or any other page you can also see that by using active class in your header links but using breadcrumb makes your site more beautiful and you don't have to use JS or for it, you can use it directly only but if you have downloaded bootstrap. So definitely add the min.css and js files to your folder and add them to your page. So that components could work properly.

Dropdown

Through dropdown, you can simply add a dropdown on your website, and here is the code for a basic dropdown
<code>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul> </div>
</code>

NavBar

Through this, you can add a beautiful and responsive navbar to your website by just adding bootstrap code to your website. And here is the code of the navbar <code>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div> </nav>
</code>

1. How to change color in bootstrap and how to add custom colors?

And for changing the color in bootstrap you have many options like primary, dark, warning, danger, success, light, info, etc and if you want to add a custom color in a button or any other element you can also do that by just clicking on the right button of your mouse in the HTML document.

Clicking on inspect and then you will find a cursor on the left of the responsive button then click on the bootstrap button or any other component copy its class and then paste it into your code editor and change the background-color like Example - .btn primary{
background-color: cyan;
}

All-time-dev

Web Dev Series 5 - Bootstrap Important Components.