1. Creating Tables With Bootstrap
Bootstrap makes it easy for you to create tables without having to type in lines of program code. You only need to call the classes that are already in the Bootstrap file.
In the Bootstrap file there are already several classes designed for the needs of creating tables, including “.table”, “.table-striped”, “.table-bordered”, and “.table-hover”.
- “.table”: class used to create and define regular/standard tables. This class only adds a small layer and a horizontal border. This class uses the <table class=”table”> line of code.
- “.table-stripped”: class used to create a table with a zebra style. So the color of each row alternates. This class uses the line of code <table class=”table table-sripped”>.
- “.table-bordered”: is a class that is used to display borders in tables. So the whole table will be attached with a border. This class uses the line of code <table class=”table table-bordered”>.
- “.table-hover”: you can use to give a hover effect on a row. This effect will take effect when you place the mouse on the row given this class. This class uses the line of code <table class=”table table-hover”>.
In addition to a collection of classes for designing tables, there are several classes for coloring table rows and data using Bootstrap, namely “.success”, “.danger”, “.info”. “.warning”, and “.active”.
2. Setting Image Display With Bootstrap
You can also design images using Bootstrap. Creating responsive images, in the form of rounds, circles, and thumbnails is very easy using this framework.
The “.img-responsive”, “.img-rounded”, “img-circle”, and “img-thumbnail” classes are a collection of classes used to manipulate images in Bootstrap. Develop optimal designs and present attractive images on your website.
- “.img-responsive”: this class allows you to create images that can be opened in a variety of screen resolutions. The .img-responsive class opens the image size to match the size of the core element. You can see the effect when resizing the browser.
- “.img-rounded”: when you want to make an image with curved sides, use this class, then you will have a curved image on the sides.
- ”img-circle”: sometimes you want a circular image, use this class and the image will appear in a circular shape.
- ”img-thumbnail”: this class is used to create thumbnail images with Bootstrap.
4. Creating Buttons With Bootstrap
Buttons are a common component and are often used to create websites. This is what makes Bootstrap also provides classes for creating attractive buttons. All you have to do is call one of the button classes and you can display beautiful buttons on web pages.
So that you can use the button on the website, just call the class “btn”. In addition, you can add other classes to give variations to the buttons in it. There are many variations of the buttons provided by Bootstrap, such as “.btn”, “.btn-default”, “.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, and “.btn-link”.
5. Creating Panels With Bootstrap
The last example of using Bootstrap is creating panels. The panel is a line formed from lines and padding. In Bootstrap, a panel consists of three sections; headers, bodies, and footers. The header is at the top. Body in the middle or core. While the footer at the bottom.
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link: www.beadgroup.com