Basics of Bootstrap

It is a front-end library to make the website responsive by simply adding bootstrap classes and, can get rid of the n-number of lines of code of CSS.

Using bootstrap in application

There are two ways to use bootstrap –

1. We can download it and add its link in the href tag
2. We can add its CDN

The preferred way to use bootstrap

We always prefer the CDN method because most of the systems have pre-installed jQuery from google, hence jQuery will be loaded from cache and our application would be faster in terms of loading.

We need to add the below links in our application –

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Advantages

1. Responsive features – Easy to create responsive websites, which appear differently according to different screen sizes.
2. Modern browser compatible – Compatible with almost all modern browsers like – Chrome, Firefox, Safari, Internet Explorer, etc.
3. Open source – Free to download and use
4. Easy to use – We just need to add bootstrap predefined classes in most of the cases.

Grid layout System –

Bootstrap divides the screen into 12 equal columns(grid) of a single row.
Hence whenever we need any element not to take the whole row, we simply can give that element col value.

For example –
If I want an element to take 50% of the screen. So, I will divide 12 by 2 i.e., 6 hence I give that div a col-6.

Note – This column’s values don’t resize its width respective to the screen. To overcome this problem, we have responsive column values divided into lg, md, sm.

lg – large – desktops, laptop screens
md – medium – tablet, ipad
sm – small smartphones

If we give a div col-md-6, this means on screens with medium and large to medium, div will take 50% of the screen i.e., 6 grids and in the screen size below medium, div would take 100% of the column.

Hence can make the page responsive by simply adding 2 alphabets.

Style Sheet Preference –

A style sheet is prioritized according to the order in which we have added the sheet.

For example – If we have style sheet1 in which the background color is red and another style sheet2 with the background color blue, and the order of adding style is style sheet 1 then style sheet 2.

The result will be of blue color.

Note – Load bootstrap first, then its styling can be overridden.

Containers –

A container is simply a class by bootstrap, to keep any element padded from left and right that is to keep the element in the center and is responsive to the screen size.

The problem with this is if you slide from the bigger size of the screen to the smaller one. The container gives the user a feeling of a jump of the content.

Note – It doesn’t affect the web page but still some designers feel like the shift from screen size needs to be smoother.

Fluid Container –

To overcome the problem with containers of sudden shift and not so the smooth transition from one
screen size to others, we have another class i.e., container-fluid.

Transition is smooth and also it takes the complete width of the screen and doesn’t centralize elements.

Carousel –

It is used when you want a slide show on the web page. We have multiple options in this like we can change the time of interval between each slide, stop the slide over hover or not, keyboard responsive or not, make slideshow auto or manual, etc.

Aria-hidden –

It is a bool type in HTML. If the element has aria-hidden= “true” then it is not visible to accessibility tools such as screen-readers.

Cards –

A card is a bordered box with some padding around its content. It includes options
for headers, body, and footer.

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams are offered by StudySection along with other programming certification exams.