#What is bootstrap anyway? Bootstrap is a powerful open-source front-end framework created to facilitate the responsive development of websites and web apps through a set of templates that can be found in the framework's [documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/). Before I begin to explain more about Bootstrap, I'd like to clarify what the term "responsivity" really means. ##Responsivity Responsive web design, a term originally defined by Ethan Marcotte in his [article](https://alistapart.com/article/responsive-web-design/) in 2010, is also emerging in the field of architecture. "Responsive architecture" studies how physical spaces can respond to the presence of people passing through them. Some architects are experimenting with art installations and wall structures that bend, flex, and expand themselves as the crowd approaches them. That's exactly what responsiveness in web development is. With so many inconsistent window widths, different screen resolutions, and even user preferences, websites must be responsive and work perfectly with all those variables. Responsive website layouts adapt themselves based on the size and capabilities of the user's devices, whether it's a phone, tablet, desktop, TV, or even a game console. Now that you know more about responsiveness, let's talk about the importance of the **Bootstrap framework.** Web developers using Bootstrap can build responsive websites much faster, without spending time worrying about basic commands and functions. ###Let's install bootstrap It can be installed via CDN, which, in my opinion, is the easiest way to start using it. Create a new **index.html** file in your project root and include the Bootstrap CSS and JS tags in it. Always remember that the CSS tag **must** be placed inside the `` tag, and the JavaScript tag must always be placed at the bottom of the `` tag. Just like this: ``` Demo

Hello, world!

``` Include the Popper scripts along with the Bootstrap JS script, so you can use dropdowns, popovers, and tooltips in your project. Here's an updated example: ``` ``` Now, let's use Bootstrap for the first time. Open your **index.html** file, and it should look like this: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x03k3ig1wfhe521b6px.png) To make the text centered on the page, simply give the `

` element a class of `text-center`, like this: ```

Hello, world!

``` Now it should look like this: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ycncx02a3zt5dat83n4.png) Note that we didn't even open a CSS file. That's the "magic" of Bootstrap. To finish this first tutorial, let's style it a bit more. Now, I want the background to be black, add some margin to the `

`element so that it doesn't touch the top of the page, and change the color of the `

` element to white so that it's visible on the black background. To achieve this, we'll make the following changes: - Give the `` element a class of `bg-black` to set the background color to black. - Add the class `my-3` to the `

` element to add top and bottom margin. - Add the class `text-white` to the `

` element to set the text color to white. ```

Hello, world!

``` And, without using any css file, the result: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4swptedo9ic98adkzlw.png) That's correct! Bootstrap is a powerful and versatile framework with extensive capabilities. Many big companies, such as Mastercard, Spotify, and Twitter, utilize Bootstrap in complex and innovative ways. Here are some websites made with Bootstrap that I admire: ## Forbes India ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shl5l6a88yfajb535os2.png) ##Fox News ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3usy8sh5f2yrqb81dyht.png) ##Made Together ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8c2ed94vbjtvtatgcr4.png) All those websites are incredibly well-crafted projects. Bootstrap truly shines in the hands of skilled developers. Now, let's explore how these skilled developers harness the power of the Bootstrap framework. #Layout ##Containers ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfveef7640rlbm37v1s3.png) `Containers` are fundamental building blocks in Bootstrap that can contain, pad, and align other elements within a given device or view-port. When structuring the HTML of a Bootstrap project, `containers` must be parent elements and cannot be nested. In other words, it is important not to place one `container` inside another `container`. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntikbraoukdfxwon3bvp.png) Just like in real life, `containers` must be separate elements that contain other elements. Let's fix our previous website and wrap the `

` element inside a `container` with a white background. Our code will look like this: ```

Hello, world!

``` As a result, we can explicitly see the space that the container is occupying. The added container with the white background provides a clear visual separation and delineates the area where the `

` element is placed. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uazmaf2ccl8t2uzcrvu.png) There are two types of containers: `container`, which we just used, and `container-fluid`. The `container-fluid` class can be used if you want a full-width `container`, spanning the entire width of the view-port. Let's update our code to use `container-fluid`: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv0qf8o91rjva7jsmczc.png) The use of `containers` will be extremely frequent during the development of your Bootstrap projects. There are other essential building blocks you need to be aware of before you continue experimenting with Bootstrap. I will now discuss them in detail. ##Grid system: rows and columns Bootstrap offers a powerful mobile-first grid system that allows us to quickly build layouts of various sizes and shapes, as I've mentioned before. This grid system is constructed using two fundamental building blocks: `rows` and `columns`. ##Rows ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z9dbifj3d0ihsnq6n4c.png) In Bootstrap, we have `containers` and `rows`. `Rows` are child elements of `containers`, meaning they are designed to reside inside `containers`. It's important to adhere to this rule to ensure clean code structure. By following this guideline, you can maintain a well-organized and structured code base. Now, let's follow the proper approach and fix our website by creating a `row` inside the `container` component. To create a `row`, we need to add a `
` element with a class of `row`. Here's the updated code: ```

Hello, world!

``` Indeed, at this point, there may not be any visible changes on the client side of our website. However, as we continue to make adjustments and apply Bootstrap's structure, the pieces will come together, and the website will start to take shape. Stay patient, and soon things will begin to make sense. ##Columns ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytrmw7n3knwmh9vx7oht.png) Just like `containers` and `rows`, `columns` are also fundamental building blocks of Bootstrap. With these components alone, we can create many interesting layouts and structures. Let's dive into understanding columns in more detail. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zb9489l4e8qvsdyk7zq.png) Let's imagine the scenario where you're moving to another country. Logically, you'll need a container to ship all your stuff. However, you won't just throw your stuff into the container because if you did, everything would break. Instead, you put a lot of boxes inside that container to keep everything organized. That's the spirit of the Bootstrap grid system. Containers are equivalent to `containers`, and boxes are equivalent to `rows`. But now we also have columns, right? Of course! Let's imagine you have a lot of old porcelain among your belongings. Would you just throw this beautiful and expensive porcelain inside the boxes? Don't even think of that! Instead, use small compartments to organize the interior of your boxes. In the Bootstrap world, these small compartments are what we call `columns`. Now, let's work on our website again and finally add a `column` to contain the `
` element. Remember, `columns` are child elements of `rows`, which are child elements of a `container`. To fix our code, we simply need to add a `
` element and give it a class of `col`. Here's the updated code: ```

Hello, world!

``` The cool thing about `rows` and `columns` is that within each `row`, you can fit up to 12 columns. The reason why nothing changed in our code is that we have only one `column` inside our `row`. Therefore, this single `column` naturally occupies the space of 12 `columns`. To better understand this concept, let's make a subtle change to our code. Instead of using the class `col` for our `column`, let's use `col-12`, which means that our `column` should occupy the space of 12 `columns`. Here's the updated code: ```

Hello, world!

``` No changes, right? That's because in Bootstrap, the classes `col` and `col-12` have the same meaning. Both of them occupy the entire available space of a `row`. However, let's consider a scenario where we need three `columns` on the same `row`, aligned vertically. If we want equal division, we can use the `col-4 class` for each column. This class will make each column occupy the space of 4 `columns`, which is one-third of the `row's` width. To differentiate the `columns` visually, let's add the `bg-primary` class for a background color and `text-white` class for a white text color. ```

Hello, world!

``` Now here's our result: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1s803923g622cqp88lg.png) Things are starting to get interesting, right? Now let's add two more `columns` to this `row` with the same classes. I've made some visual changes to the second column to help us better visualize our grid. Here's the updated code: ```

Hello, world!

Hello, world!

Hello, world!

``` Here's what we have on our website now: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf8ngib8vahckex01dr2.png) Note that now we have a `font-size` of 40px ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnb3gk3f9wtpmk74s2kz.png) Pretty cool, right? Everything is perfectly aligned and centered on our screen. But what if we test our website on other screen sizes, like a tablet? Let's see how it looks: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmfgcj7uapjhd1u7bf7u.png) Our layout still looks great, even the `font-size` was automatically adjusted to fit the new screen size. This is one of the benefits of using Bootstrap's responsive grid system. It ensures that our website maintains its structure and readability across various devices and screen sizes. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t7rgpvpvuk1rye0i1m9.png) To test our layout on the screen size of an iPhone 5/SE, here's how it would look: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9capvwp431xfelaqxge.png) I'm not satisfied with this result as the columns appear squeezed within the row. However, this is the point I wanted to reach in order to move on to the next topic: Responsiveness. See you all in the next blog about Bootstrap Responsiveness! Thank you for reading through the entire article, and please let me know if you find any mistakes.

devpedrofurquim

The bootstrap framework for newbies Part 01

Join Our Newsletter. No Spam, Only the good stuff.