Free Online Courses for Software Developers - MrBool

Click here to login

If you don't have a registration, click here to register

Mrbool Courses

Online course

Introduction to Bootstrap

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions." In this course, we will learn all the details about Bootstrap. We will follow the hands-on approach by learning new features through examples. We will use Notepad++ to write the code, and Google Chrome to preview our changes.

  • Getting Started

    • 2

      Getting Started

      In this lesson we start our first example. We discuss the structure of the page, and then we look at a sample page that contains some text and html. Watch this video
    • 3

      Alerts, labels and badges

      In this lesson we will discuss badges, alerts, and warnings. I will start by showing you how the final page will look like. Then, I will add the items one at a time. Watch this video
    • 4

      Hero Unit and Tabs

      In this lesson we will discuss the hero unit and the tabs. As you will see, the main point to take away from the discussion is the classes that you need to use. Watch this video
  • Structure

    • 5

      Creating the Navigation Bar

      In this lesson we will talk about menus. As you know menus are heavily used in web applications. The main concept behind creating menus is using unordered lists and styling them. Watch this video
    • 6

      Progress bar and Type ahead

      In this lesson we will talk about type ahead and progress bar. When the user is waiting for an action to complete on your web site, it is important to see the progress. Watch this video
    • 7

      Nav and Navbar

      In this lesson we will learn about navigation. We will discuss navs and navbars, along with their supporting classes. Watch this video
    • 10


      In this video we will see how the scrollspy works. Imagine you have a set of articles on the page. There are some links associated with those articles. As you scroll from an article to the next, the associated link is activated. Watch this video
    • 11


      In this video we will talk about pagination so you can easily move from one set to the next and back. We will see the different paginations that bootstrap provides out of the box. Watch this video
    • 12

      JavaScript Modals

      In this video we will discuss how we can display a modal dialog. The page starts with a anchor tag (with a role as a button). When the user clicks on the button the dialog will slide down on the screen. Watch this video
    • 13

      Images Icons and Buttons

      In this lesson, we will learn about buttons, images, and icons. As we have discussed before, Bootstrap provide the web developer with many classes that simply to web application development. Watch this video
    • 14


      Grids give the developer lots of flexibility in displaying items. Bootstrap divides the grid into 12 columns. In this video we will start our discussing about Grids in Bootstrap development. Watch this video
    • 15

      Grid with container

      In this video we will take the grid a step further by experimenting with responsive design. We start by creating a grid that contains the container, row and spanXX classes. Watch this video
    • 16


      In this video we will experiment with the form element. We know that most of the elements are part of HTML5. But in this case, we will explore those elements and see what difference adding Bootstrap reference will make to the page. Watch this video
    • 17

      Extending Form Controls

      In this video we will see we can join the input and span elements to create one control for the user to enter the email address and we can also join the buttons into a form-action. Watch this video
    • 18


      The carousel will help us display items one at a time, with an arrow on the left and one on the right. As the user clicks on the arrows, the next/previous item displays. In this video we will see how to use it. Watch this video
    • 19


      In this video we will see how to work with collapse and also see how to capture events as they occur. For example, we will use jQuery to handle the hidden event. Watch this video
    • 20

      Dropdowns Buttons

      In this lesson, we will talk about dropdowns and buttons. We will see how to use the class dropdown-menu to create the menu with list items. Watch this video
  • Bootstrap 3.0

    • 21

      Bootstrap 3.0 Release

      In this video we will start working with the latest release 3.0.3 of Bootstrap. There are many new features that have been added and the new release is not backward compatible with the previous one. Watch this video
    • 24

      Panels and Wells

      In this lesson, we will talk about panels and wells. These are new components added to Bootstrap 3.0. We will experiment with every component and discuss the need of each. Watch this video
    • 25

      List groups and Glyphicons

      In this video we will discuss about list groups and Glyphicons. The list groups are very helpful in displaying simple lists of elements as well as complex ones with custom content. Watch this video
    • 26

      Jumbotron, Input Group and Inline Form

      In this video we will talk about Jumbotron, Input Group and Inline Form. We will create a jumbotron with a page header and footer. It is very handy to group related controls together to simplify the user input and avoid errors. Watch this video
    • 27

      Bootstrap Forms

      In this video, we will discuss about forms. We will start with a simple HTML 5 forms. Then, we will add link to Bootstrap and start applying the form related classes to the form elements. Watch this video
    • 28

      Bootstrap Multi-column Forms

      In this video we will be working with two forms: In the first one, we will divide the page into two sections. The first one will be a panel (within 4 columns), and the second one will be a form (in the other 8 columns). Watch this video
    • 29

      Form Validation: Client Side

      There are two places of validating the form data the user is entering: On the client side and on the server side. As a developer, you need to do both. In our case, we will validate on the client side. Watch this video