Learn Bootstrap 4 for free

This course teaches you Bootstrap 4 through ten interactive tutorials. It's the easiest way to learn the latest version of the popular CSS framework.

    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
            <style type="text/css">
                .row div {
                    border: 1px solid silver;
                }
            </style>
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <nav class="navbar navbar-light bg-light navbar-expand-lg fixed-top">
                <a href="#" class="navbar-brand">My Website</a>
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
            
Neil Rowe5:3311 months ago
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, s
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <div class="container" style="margin-top:20px;">
                
Neil Rowe6:1811 months ago
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <div class="container" style="margin-top:30px">
                
Neil Rowe5:4411 months ago
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <div class="container" style="margin-top:30px">
                
Neil Rowe5:0811 months ago
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <div class="container" style="margin-top:30px">
                
Neil Rowe3:1811 months ago
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <div class="container" style="margin-top:30px">
                
Neil Rowe2:5111 months ago
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
            <title>Hello, world!</title>
        </head>
        <body>
            
            <div class="container" style="margin-top:30px">
                

Learn the world's most popular front-end component library


Bootstrap 4 represents a major rewrite of the library. Not only are there a lot of changes under the hood, but there are also several new concepts you’ll need to wrap your head around.

The course takes you through everything you need to know in order to create full-blown websites with Bootstrap v4. Whether you've been working with Bootstrap before, or are completely new to the framework, this course will get you up to speed with the newest version.

What you'll learn:

  • Bootstrap 4 classes
  • The responsive grid system
  • Columns and rows
  • Components
  • Responsive navbars
  • Margins
  • Modals, dialogs
  • Buttons
  • Forms
  • List groups
  • Badges, pills
  • Cards
  • Tables
  • Alerts
  • Navigation options
  • Links

... and more!

And remember, this isn't a regular video course, it's a Scrimba course! This means you can interact with the code inside the tutorials whenever you want, which makes learning much more fun!

So claim your free spot in this course today!

What people are saying about Scrimba: