My Learnings from the Udemy Course - Bootstrap 4 from scratch with 5 projects

Karthik Shivkumar

ServiceTitan•820 followers

Published Apr 28, 2020

Introduction

In continuation of my quest to acquire Web Development knowledge, I wanted to learn a CSS framework and hence I had enrolled for and completed the Udemy course ‘Bootstrap 4 from Scratch with 5 Projects’ by Brad Traversy.

It seemed to be the next logical step after completing the course on the ‘Modern HTML & CSS from the beginning’. You can find the article on my takeaways from the course over here - My learning from the Udemy Course - Modern HTML & CSS.

Before I get into the details, I would like to mention that learning any framework involves the process of understanding the tools available within the framework and get enough practice under the belt to use those tools, so that, it becomes second nature.

The five projects that are available with the course reinforce the concepts of Bootstrap4 and make you feel confident that you can use them in real-life projects.

What is Bootstrap?

Bootstrap is an open-source front-end CSS framework that includes pre-made HTML/CSS templates and classes, javascript widgets/plugins to support rapid web development.

Why would I use Bootstrap?

Bootstrap in simple terms can be explained as a set of settings (properties and their values) within a class. E.g. if you want to add a large blue button to your web page, you would have to declare the button markup in the HTML and then head over to the custom CSS file and add the styling for the button. Using bootstrap, you would just need to call the button large class and set the styling to button danger and that's it.

So essentially, it speeds up development time a lot. Especially, someone like me who's a backend programmer, Bootstrap’s ready-made classes, templates provide a much easier, simpler way to style the web pages, rather than writing tonnes of custom CSS code.

Also, it is completely responsive and has in-built support for all modern web browsers.

What is covered in the course?

The course is divided into eleven sections. Each section contains around 5-10 lectures with the last five sections focusing on the hands-on projects.

The Bootstrap fundamentals are divided into the following sections

Utility Classes - Generic styling classes such as colors, spacing, etc.
CSS Components - Styling classes of a CSS component such as Navbar.
Grid & Flexbox - CSS classes pertaining to Grid & Flexbox layout.
Javascript Widgets - CSS classes of components that require Javascript to be functional. E.g. Carousel, Modals.

We will dive into each of these sections with few examples.

Utility Classes

The utility classes are a set of generic classes that are applied across all HTML elements. A simple example of the same would Color and bootstrap offers the following default colors as a part of the framework.

        <!-- TEXT COLORS -->
        <p class="text-primary">Text Primary Color</p>
        <p class="text-secondary">Text Secondary Color</p>
        <p class="text-success">Text Success Color</p>
        <p class="text-info">Text Info Color</p>
        <p class="text-warning">Text Warning Color</p>
        <p class="text-danger">Text Danger Color</p>
        <p class="text-light bg-dark">Text Light Color</p>
        <p class="text-dark">Text Dark Color</p>
        <p class="text-white bg-dark">Text White Color</p>

The other main utility classes worth mentioning are spacing, sizing, text-alignment, and display.

CSS Components

The CSS components are pre-defined component style classes. The button class is a very good example that is very commonly used.

//The class of btn-primary produces the effect of a button with primary color
<button class="btn btn-primary" type="button">
    Primary
</button>

//The class of btn-secondary produces the effect of a button with secondary color
<button class="btn btn-secondary" type="button">
    Secondary
</button>

//line break
            <br>
            <br>
//End of line break

//The class of btn-ouline-success produces the effect of a button with the border //of success(green) color. Upon hover, the button turns into success (green) color
<button class="btn btn-outline-success" type="button">
        Success Outline
</button>

//Same as above. Button's border color is info and upon hover button turns into //info color
<button class="btn btn-outline-info" type="button">
        Info Outline
</button>

//line break start
            <br>
            <br>
//line break end


//The class btn-lg produces a large button
<button class="btn btn-primary btn-lg" type="button">
           <i class="fas fa-user"></i> 
           Large button
</button>

//The class btn-sm produces a small button
<button class="btn btn-success btn-sm" type="button">
   Small button
</button>

//line break start
            <br>
            <br>
//line break
             end

//The class btn-dark produces dark background and block stretchs the button the container's width.
<button class="btn btn-dark btn-block" type="button">
    Block level button
</button>

The other main classes covered in this section are Forms, Alerts, and Cards.

Grid & Flexbox

The bootstrap classes 'grid' and 'flex' define the container to either act as a grid or flex container.

Any element with the 'grid' class definition would allocate 12 equal column widths within the container. For each of the child elements within the grid container, you can use bootstrap classes to specify how many column widths the element would occupy.

Also, bootstrap allows you to define the column widths an element would occupy based on the screen dimension and hence supports responsiveness without the need for any extra code.

    //By specifying the class "row" the Grid System is initialized
    <div class="row">

      //Using hyphonated keywords such as 'sm', 'md', 'lg' and 'xl', one can 
      //specify the the number of columns occupied by component based on device 
      //size     
      <div class="col-sm-6 col-md-8 col-lg-9 col-xl-10">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>

      
    </div>

The diagram below depicts varying kinds of layout alignment that can be used using the Grid layout.

Flexbox layouts are also covered in this course which contains predefined classes to align items as a flex-row vs a flex-column. Further, the components inside the flex container can be aligned using the bootstrap classes such as justify-content-center, align-items-center, etc.

Javascript Widgets

Javascript widgets require few javascript properties to be defined within the HTML markup along with the CSS classes. Boostrap4 internally uses jQuery for running javascript.

A good example of the same would be Modals and is explained below in the code snippet.

<!-- LOGIN MODAL TRIGGER -->
<button class="btn btn-secondary btn-block" 
data-toggle="modal" 
data-target="#loginModal">
      Login
</button>


<!-- LOGIN MODAL -->
<div class="modal" id="loginModal">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <h5 class="modal-title">Login</h5>
               <button class="close" data-dismiss="modal">&times;</button>
           </div>
           <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="username">Username</label>
                  <input type="text" placeholder="Username" class="form-control">
                </div>
                <div class="form-group">
                   <label for="password">Password</label>
                   <input type="password" placeholder="Password" class="form-control">
                </div>
              </form>
             </div>
             <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">
                      Login
                </button>
             </div>
        </div>
     </div>

 </div>

From the above code snippet, the important things to note are -

The attributes 'data-toggle' and 'data-target' are used by the javascript to initialize the modal upon the Login button click.
There are several classes right from the modal-content to the modal-footer that are provided the component to give the complete look and feel to the component.

The other JS widgets covered in the course are Carousel, Popovers, Accordion.

Hands-On Projects

The five hands-on project exercises emphasize on providing enough practice of applying the bootstrap CSS style classes.

Looplab

The Looplab project is a single-page themed for a social network application. You will get to apply the following bootstrap classes navbar, card, footer, display, image overlay, etc.