You can create these components by adding the appropriate Bootstrap classes to elements. If you want to create a Bootstrap button, for example, then you use the .btn class to define a button element (or an anchor or input element). This will make the element clickable, with rounded edges, like a button. Adding a modifier class like .btn-primary or .btn-warning will style the element even further, changing its background and text color. Take a look at the different styles of these classes below.
Using Bootstrap classes, you can also style images and opt them into responsive behavior so they scale to their parent elements. That means they’ll scale as their container does when the browser window is resized. Without the Bootstrap framework, you’d have to code a bunch of lines of code to achieve this. With Bootstrap, you only need a class name or two.
Let’s take a closer look at these classes below.
Bootstrap Responsive Image
In Bootstrap 3, the .img-responsive class made an image responsive. It has been replaced by the .img-fluid class in the latest version of Bootstrap.
The .img-fluid class means the following properties and property values are defined for the image:
This tells the browser not to expand the image larger than its container or original size, and to scale down the image if the browser gets narrower than the set width of the image.
In Bootstrap 3, the .img-rounded class adds rounded edges to the image. It has been replaced by the .rounded class in the latest version of Bootstrap. This is a border-radius utility that can be applied to images and other elements.
In Bootstrap 3, the .img-circle class makes an image into a circle. It has been replaced by the .rounded-circle class in the latest version of Bootstrap. Like the .rounded class, this is a border-radius utility that can be applied to images and other elements.
Unlike the .rounded and .rounded-circle classes, the .img-thumbnail class is not a border-radius utility. Rather than shape the edges of an image, the .img-thumbnail class adds a rounded 1px border to the image to make it look like a thumbnail.
With Bootstrap classes, you can make your images responsive so that they scale to their parent element. You can also add lightweight styles, like rounded edges or borders, to them via classes. This is just one way Bootstrap saves you time and lines of code when developing web pages.
Originally published Dec 22, 2020 7:00:00 AM, updated August 23 2021