Trang chủ‎ > ‎IT‎ > ‎WEB PROGRAMMING‎ > ‎

Bootstrap

1. Official Documentation

This is the first place you should check for updates and official starting guide.

2. This Free Tutorial: Bootstrap 4 Quick Start: Code Modern Responsive Websites

In this free course you will learn:

  • all about the new features in Bootstrap 4
  • what’s different in Bootstrap 4 vs. Bootstrap 3
  • how to set up an efficient workflow for Bootstrap projects
  • how to build 3 separate responsive websites, including a modern startup landing page
  • how to download & install SASS for Bootstrap websites

3. Free Code Camp

It teaches coding first through an established curriculum (approx. 800 hours total on all frameworks). Then, it gives you a hands-on experience working on projects for nonprofits.

4. Team Tree House

Learn how to build websites and apps, write code, or start a business. Learn from over 1,000 videos created by expert teachers on web design, coding, marketing, and much more.

5. Free & Complete Bootstrap 4 course — build 3 projects

A complete Bootstrap 4 course for beginners. Master Bootstrap 4 basics with 3 plans

What will you cover in this course?

  • Bootstrap 4 in-depth
  • A walk through for creating projects from scratch
  • Ability to read documentation

6. Bootstrap 4 by Example

Learn how to build beautiful layouts with this free Bootstrap 4 course. Learn by doing and learn by example!

You will learn:

  • How to Install Bootstrap 4
  • Setting up a Modern Development Environment with Gulp
  • Customizing Bootstrap 4 with Sass
  • Navigation
  • Flex Grid
  • Forms
    …and much more.

7. Video — Bootstrap Beginner Crash Course

Want to learn Twitter Bootstrap? In this video, you will learn the Twitter Bootstrap framework in depth from installation to all of the HTML/CSS components and features.

What will you learn?

  • Grid System
  • Navbars & Dropdowns
  • Jumbotron
  • List Group
  • Alerts & Progress bars
  • Typography
  • Labels & Badges
  • Much More…

8. Learn Bootstrap By Building Projects — Includes Bootstrap 4

Master Responsive Web Development Using Bootstrap 3 and Bootstrap 4 While Building Real Life projects

What will you learn?

  • Build Responsive Websites
  • Understand the use of Bootstrap Components
  • Master the best practices for HTML, CSS and JS development

9. Bootstrap 4: Everything You Need to Know

This article will cover the practical fundamentals you need to start building responsive websites with the latest version of Bootstrap, version 4.


Learn Bootstrap - Best Bootstrap Tutorials | Hackr.io


https://hackr.io/tutorials/learn-bootstrap

The Best Way to Learn Bootstrap | BootstrapBay


https://bootstrapbay.com/blog/learn-bootstrap/

In simple terms, Bootstrap is a style guide and toolkit to help developers quickly build frontend layouts.

Bootstrap contains a CSS reset, typography styles, grid classes, and components to add functionality to your website or web application.

Most websites have a header, footer, navigation, column grid, modals, carousels, etc. Bootstrap contains these components, so you save time by not having to rewrite styles you would probably need anyways.

In addition, it is written mobile-first responsive so you can control your grid layouts and components at various window widths. This again saves you time from having to write your own media queries to make style adjustments.

jQuery made writing javascript easier by providing a library of functions and methods you could use and write quickly. A developer could do the same thing writing the javascript from scratch, but this would take more time, be more error prone, and not be as fun.

Bootstrap does the exact same thing for page layout and style. You could write everything from scratch OR you could build your styles on top of a solid foundation.

Have I sold you on the benefits of Bootstrap yet? Great. Let's try it out.

All you need to do is visit the official documentation and grab the style and script tags to include. Below is a starter template.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- Bootstrap CSS -->
  8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
  9. crossorigin="anonymous">
  10. <link rel="stylesheet" href="/css/your-style-overrides.css">
  11. <title>Hello, world!</title>
  12. </head>
  13. <body>
  14. <h1>Hello Bootstrap!</h1>
  15.  
  16.  
  17. <!-- Optional JavaScript -->
  18. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  19. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  20. crossorigin="anonymous"></script>
  21. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
  22. crossorigin="anonymous"></script>
  23. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
  24. crossorigin="anonymous"></script>
  25. <script src="/js/your-own-scripts.js"></script>
  26. </body>
  27. </html>

Next, you will need to build your grid. Add this code below the <h1> tag

  1. <header>
  2. <div class="container">navbar goes here</div>
  3. </header>
  4. <section>
  5. <div class="container">carousel goes here</div>
  6. </section>
  7. <section>
  8. <div class="container">
  9. <div class="row">
  10. <div class="col-md-4" id="sidebar">
  11. sidebar nav
  12. </div>
  13. <div class="col-md-8" id="main">
  14. <div class="row">
  15. <div class="col-md-4">Column 1</div>
  16. <div class="col-md-4">Column 2</div>
  17. <div class="col-md-4">Column 3</div>
  18. </div>
  19. <!-- /.row -->
  20. </div>
  21. </div>
  22. <!-- /.row -->
  23. </div>
  24. </section>
  25. <footer>
  26. <div class="container">footer</div>
  27. </footer>

You should have something that looks like this.

You can view this demo on codepen: Hello Bootstrap 4!

So now that you have the basics down of what it is and how it can help you as a developer...

How do you practice and get really good at using Bootstrap 4?

I created my Bootstrap 4 Quick Start to help you build two practical examples, a marketing homepage and an admin dashboard.

I walk you through the steps of starting with a sketch, building a prototype, and then customizing the design so it looks less like the default Bootstrap styles.

If you have any questions please let me know in the comments. Thanks and happy Bootstrapping! - Jacob

There are lots of websites available where you can easily learn the bootstrap. Here is the list:

  1. Introduction
  2. Bootstrap 3 Tutorial
  3. Bootstrap Tutorial
  4. An Ultimate Guide for Beginners
  5. Make a Website: Bootstrap