Bootstrap 4: What do we Know?
Hello! In a previous blog post we discussed a markup language that creates the structure of web content. It displays any and all text we want the user to see. The next order of business would be to learn all about the stylesheet language, CSS, however, nowadays there are newer, more popular frameworks that make adding styles to our webpages a lot easier. Bootstrap is one of them. The most updated version of bootstrap is v5. Recently, at Holberton School, we have been researching and learning about v4, so that is the version I will write about.
What is it?
Bootstrap is a framework that helps you make responsive websites. Responsive means that when the size of the window or screen changes, the layout of the website still looks good. To incorporate bootstrap into your application there are many ways we can go about it. Codecademy dives into all these nitty gritty ways with ease, so check it out here. Today, we will import the bootstrap into our code.
Link to a CDN
A CDN is short for content delivery network. A content delivery network is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are. Data centers across the globe use caching, a process that temporarily stores copies of files, so that you can access internet content from a web-enabled device or browser more quickly through a server near you. Using a CDN is the fastest way to get set up with bootstrap.
- This stylesheet link goes into our <head> tag before any other stylesheet in order to load our CSS.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Final Starter Template:
Bootstrap is designated as a mobile first technology, it optimizes code for mobile devices first and then scales up components as necessary using CSS media queries. What makes this framework responsive is its 12-column grid.
The Grid System
A webpage is divided into rows and columns. Each row is divided into 12 columns and an element can take up any number of these columns. Elements include: paragraphs, images, headers, etc. You can have up to 12 elements in one row, or less, depending on what you need. What is special, is that no matter the screen size it will always stay the same at 12 columns. We specify the amount of columns we want for each element on these size screens:
- extra small (xs) →less than 576px
- small (sm) →576px and up
- medium (md) →768px and up
- large (lg) →992px and up
- extra large (xl) →1200px and up
These breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
The most basic layout component in bootstrap 4 is containers. They wrap and “contain” our content, provide basic padding and margins, and help us center content on the page. A container can be fluid or fixed.
Fluid: always 100% of the viewport width of its surrounding container.
Fixed: has a max-width that changes depending on the breakpoint or viewport; as we get to smaller screens the max-width gets smaller; as we go to larger screens the max-width gets larger.
>>>> Sample code time!!!
It is important to note that the rows MUST go inside the container. Check out the <body> tag below the <head>. Here we have two class elements defined in our row, with corresponding text to be reflected on the screen for the user. The
col-sm-6 represents an individual column made for size small screens and higher, that takes up 6 rows of space. Because we have two of these exact same elements, both sections of text should each take up half of the page horizontally. As shown below.
I will be linking an amazing YouTube tutorial that details a “crash course” of all the things to know about Bootstrap 4. It will be a lot more interactive and fun to begin working with.
YouTube video Bootstrap 4: https://www.youtube.com/watch?v=hnCmSXCZEpU
Here is a key I created for you to refer back to as you are steadily learning bootstrap and still in the process of implementing exactly what you want.
Order= controls visual order of content
Offset= moves columns to the right; increases left margin
Text-white= white text
Text-center= centered text
Row= predefined class in bootstrap
Justify-content= add flags to this code to define space between and around content
Border-bottom= style border
Mb= margin bottom
List-group= Use to display series of content
Align-items= change alignment on cross axis
Collapse= plugin used to show/hide content
D-flex= use flexbox to create horizontal/vertical elements
D-md-none= no display property on md screens
D-none= no display property
Thanks for reading along!