Geek Culture
Published in

Geek Culture

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.

Quick Start:

  • 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">

A lot of the frameworks’ components require the use of JavaScript to function, and even some require special plugins created specifically for this framework. So, we place these next few <script> tags near the end of our webpages, right before the closing <body> tag to enable them.

<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:

HTML5 doctype, with viewport meta tag for responsive behaviors

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.

Containers

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.

Beginner Key:

Bg= background

P= padding

Col= column

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store