D4mations.com

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

[ad_1]
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

d4mer

,
, , , , , , , , , , ,

30 responses to “Bootstrap 4 Tutorial [#1] What's New in Bootstrap 4?”

  1. 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>

  7. 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 ?

  23. 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.

  25. 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.

  26. 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!

Leave a Reply