“Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.” — Wikipedia
This quote from Wikipedia defines the Bootstrap pretty well. I don’t want to add something more instead I prefer to talk about bootstrap structure and how to work with bootstrap. Before any further, I need to mention that, to understand the bootstrap it’s better to have some Flexbox knowledge. It is important because at V4 bootstrap foundation lay on top of flex instead of floats.
List of Content:
1. How Bootstrap works
2. What has changed at V4
3. Installation
4. Bootstrap Grid System
5. Customization of Bootstrap via Sass
6. Important Components to Keep in Mind
7. Summary
8. Conclusion
How Bootstrap Works
To understand bootstrap, we need to investigate how an external Front-End library works in our app. I’ll demonstrate it with an easy example. Let’s assume we create a library called ‘Example’. This library has some predefined classes.
.example {
background-color: tomato;
}
To use this library, we need to add CDN (Content Delivery Network) link to our page. When we get connected to our library and get the cached files into our browser, we can use those predefined classes. Those classes have some CSS properties that modify our overall layout and look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://example.com/example/4.5.0/css/example.min.css"
integrity="sha384–9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="example">
Hello world!
</div>
</body>
</html>
Just to inform you, our link in the head is not a real link. We are assuming that we have a link that has some predefined classes in it. To compile and use them, we just put this link so our .example class can work on our page.
This was a wandering case, but Bootstrap uses the same logic under the hood. A lot of developers have created some style just to use it whenever it’s needed beforehand and we are just taking their styles to our page. For more detailed explanation wait for the installation part. We’ll discuss the two ways of installation and Bootstrap’s CSS file.
What Has Changed at V4
To you who knows Bootstrap for a long time, those changes make more sense. After I learned the details of them, I could say bootstrap makes itself live longer with those changes and they are quite tactical changes that are very useful. Even V5 has a greater impact on the performance, and I am leaving this discussion for a future advanced article.
#bootstrap #css #css3 #bootstrap-beginners #hackernoon-top-story #learning-to-code #tutorial #coding
