Bootstrap 4 Tutorial [#1] What's New in Bootstrap 4?


https://i.ytimg.com/vi/69nEzHLy_tM/hqdefault.jpg



In this free tutorial video, we will learn about all of the new features in Bootstrap 4.

Download the final course files for free here: http://www.bradhussey.ca/bootstrap4-coursefiles

Get this course free at CodeCollege.ca: http://codecollege.ca/courses/bootstrap-4-quickstart/

– – –
Links mentioned in this lecture…

CSS Tricks FlexBox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bootstrap Slack Channel: http://bootstrap-slack.herokuapp.com/
– – –

Share the love, spread the word:

1) Subscribe to my channel
2) Share on Facebook & Twitter
3) Send this free course to a friend

Original source

30 thoughts on “Bootstrap 4 Tutorial [#1] What's New in Bootstrap 4?

  • October 31, 2019 at 16:20
    Permalink

    Can you do a bootstrap tutorial on starter template? I somehow coded it by the websites guide and I get a different result than the original. I have to faded Background for example and the logo is right instead of left and on the left I have a burger menue somehow.
    I am very new to bootstrap.

    <!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="css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Test.info</title>

    </head>

    <body>

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="#">

    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="logo">

    Portfolio

    </a>

    </nav>

    <!– Optional JavaScript –>

    <!– jQuery first, then Popper.js, then Bootstrap JS –>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    </body>

    </html>

  • October 31, 2019 at 16:20
    Permalink

    Amazing tuts, so inspired was, that decided to create my own web-app. Started with a small task – a case converter app: https://ubbercase.me/ I put all my inspiration and love into it, so would be great to get some feedback, if you'll see this comment

  • October 31, 2019 at 16:20
    Permalink

    Bootstrap container In PX
    In Boot..3 XL none
    In Boot..4 Xl is @media (min-width: 1200px) {
    .container {
    max-width: 1140px;
    }
    }
    but this is smaller as in Boot. 3 LG with 30px

    LG
    In Boot..3 LG @media (min-width: 1200px) {
    .container {
    width: 1170px;
    }
    }
    In Boot..4 LG @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }

    MD
    In Boot..3 MD @media (min-width: 992px) {
    .container {
    width: 970px;
    }
    }

    In Boot..4 MD @media (min-width: 768px) {
    .container {
    max-width: 720px;
    }
    }

    SM
    In Boot..3 SM @media (min-width: 768px) {
    .container {
    width: 750px;
    }
    }

    In Boot..4 SM @media (min-width: 576px) {
    .container {
    max-width: 540px;
    }
    }

    Nice congratulations for bootstrap, this is worse as Boot3 Why ?

  • October 31, 2019 at 16:20
    Permalink

    Your video tutorial are the best. your php is the best. I hope there oop and mysqli now. if (there is){please send me the link}else{thanks for the tutorial, I really appreciate it}

  • October 31, 2019 at 16:20
    Permalink

    Very much looking forward to this, thanks for making a video on it Brad.

    Bit confused what to however when you say not to use alpha for real world projects. How do we know when it is safe to use?

  • October 31, 2019 at 16:20
    Permalink

    No frills, clear explanations, yet still lighthearted. Seems like this will be a great channel to learn from. Subscribed.

  • October 31, 2019 at 16:20
    Permalink

    Hello sir, This is a very useful video. Sir I am making a website on bootstrap, i am having a problem in equal hight column. could you please tell me how to solve this problem.

    Here is my code…..

    <section id="page_2sec">
    <div class="container" id="col-container">

    <div class="row" id="box-row">
    <div class="col-md-4 col-sm-12 sec_div-1 border_div">
    <div class="panel panel-primary">
    <div class="panel-heading panel_1">
    <h3 class="sec_h3 wow zoomIn" data-wow-duration="1s" data-wow-delay="0.5s">Myth#1<br>
    lorem.</h3>
    </div>
    <div class="panel-body pnl_body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.</p>
    </div>
    </div>
    </div>
    <div class="col-md-4 col-sm-12 sec_div-2 border_div">
    <div class="panel panel-primary">
    <div class="panel-heading" id="panel_2">
    <h3 class="sec_h3 wow zoomIn" data-wow-duration="1s" data-wow-delay="0.6s">Myth#2<br>
    lorem.
    </h3>
    </div>
    <div class="panel-body" id="pnl_body2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, maxime.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.</p>
    </div>
    </div>
    </div>

    <div class="col-md-4 col-sm-12 sec_div-3 border_div">
    <div class="panel panel-primary">
    <div class="panel-heading">
    <h3 class="sec_h3 wow zoomIn" data-wow-duration="1s" data-wow-delay="0.7s">Myth#3<br>
    lorem.
    </h3>
    </div>
    <div class="panel-body pnl_body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, maxime.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.</p>
    </div>
    </div>
    </div>
    </div><!row ends>
    <div class="row">
    <div class="col-md-6 col-sm-12 sec_div-3 border_div" id="div_4">
    <div class="panel panel-primary">
    <div class="panel-heading" id="panel_4">
    <h3 class="sec_h3 wow zoomIn" data-wow-duration="1s" data-wow-delay="0.8s">Myth#4<br>
    lorem.
    </h3>
    </div>
    <div class="panel-body" id="panel_4body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, maxime.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.repudiandae.Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Teneturrepudiandae.Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur</p>
    </div>
    </div>
    </div>

    <div class="col-md-6 col-sm-12 sec_div-1 border_div" id="div_5">
    <div class="panel panel-primary">
    <div class="panel-heading">
    <h3 class="sec_h3 wow zoomIn" data-wow-duration="1s" data-wow-delay="0.9s ">Myth#5<br>
    lorem.

    </h3>
    </div>
    <div class="panel-body pnl_body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, maxime.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur, repudiandae.Veritatis quasi recusandae omnis nihil debitis itaque eaque ad sed quis, culpa at, commodi nam nisi accusamus asperiores porro illum? Tenetur</p>
    </div>
    </div>
    </div>

    </div>
    </div><!container ends>
    </section>

    Thanks in advance.

  • October 31, 2019 at 16:20
    Permalink

    Bought your 23 Projects course on Udemy. Coupled with your youtube channel all the materials are extremely educative and useful.
    Thanks, bro!

  • October 31, 2019 at 16:20
    Permalink

    Hello Brad, I am Sajed Shaikh. Thank you very much for making video tutorials on Bootstrap and SASS/SCSS. I have learned a lot by referring your tutorials. Now I have started learning Angular 2 technology. I would really appreciate if you could make video tutorials on Angular 2. Looking forward to hear from you.

  • October 31, 2019 at 16:20
    Permalink

    Is boot strap 4 ready for purchase now? We are new to web design, tried many products and found Coffeecup the best for our needs. Thanks for the augmented information, it is very helpful!

  • October 31, 2019 at 16:20
    Permalink

    my god, anyone know the Music ? Its so awesome lol.

    And btw – Love you brad its been 30 hours, enough time i guess 😀
    Great Course ( Ultimate Web Dev)

Leave a Reply