D4mations.com

Bootstrap 4 Tutorial [#5] Hand-code a Responsive Website (Part 2)

[ad_1]
https://i.ytimg.com/vi/P1IySG_V7V0/hqdefault.jpg



In this free tutorial video, we will continue hand coding our responsive Bootstrap 4 website using the new Bootstrap 4 Carousel & Cards.

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/

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

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

27 responses to “Bootstrap 4 Tutorial [#5] Hand-code a Responsive Website (Part 2)”

  2. My code for the carousel, which won't work in the latest bootstrap version(6):

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img class="d-block w-100" src="img/Wallpaper.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
    <img class="d-block w-100" src="img/Wallpaper.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
    <img class="d-block w-100" src="img/Wallpaper.jpg" alt="Third slide">
    </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>

    The code above doesn't work and i can't seem to find the problem, please help !
    Thanks in advance.

  4. So… Questions!

    a) How can I make it to change the text font, for example with google fonts and still make it responsive??

    b) How can I get the buttons in the end of the card to all be align at the bottom?

    Thanks!

  6. How many containers can you have on a page? On mine I have a navbar, a large image, a Jumbotron container and then a container for the remaining information which is my portfolio section and contact with a footer. So I guess I have one container halfway down and then a Jumbotron container at the top. Can you put content on the page not in a container like your top large image??

  7. My images weren't maintaining their aspect ratio in the carousel when shrinking the page. Added the following to the style sheet which resolved the issue.

    .carousel-inner > .carousel-item > img {
    width: 100%;
    height: 100%;
    }

  9. Was having issue with latest alpha 6 build with cards…I did the following to correct it, it is responsive so depends on the size of screen the Programming & Technical sometimes is a little lower than the other cards due to the long name…
    <div class="row">
    <div class="col-sm-12">
    <div class="card-group">
    <div class="card">
    <div class="card-block">
    <h4 class="card-title">Strategy &amp; Planning</h4>
    <h6 class="card-subtitle">Support card subtitle</h6>
    </div>
    <img class="card-img-top" class="card-img-bottom img-fluid" src="img/chalkboard.jpg" alt="Writing on a chalkboard">
    <div class="card-block">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque, a quisquam perspiciatis
    architecto natus eveniet quia asperiores, laboriosam nihil cumque illo corrupti unde
    provident veritatis vitae nobis ducimus. Sequi!</p>
    <button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more
    </button>
    </div>
    </div>
    (copied all card div for the other two cards)

  10. Bootstrap v4.0.0-alpha.6 card content won't align to top with the split card groups. Put your card content in one parent card group and you're good to go. See question and answer on Stack Exchange.

  11. For Bootstrap v4.0.0-alpha-6:
    15:00 Change btn-success-outline to btn-outline-success
    For me cards didn't work perfectly so I changed first card-block for each to card-header and that fixed some of issues. With media queries I 'fixed' my cards to look perfectly.
    @media (max-width: 1199px) {
    .card-header h4 {
    font-size: 18px;
    }
    .card-header h6 {
    font-size: 12px;
    font-weight: 400;
    }
    .card-header {
    height: 80px;
    }
    }

    @media (min-width: 1200px) {
    .card-header {
    height: 100px;
    }
    }

  12. none of the navigation nor the cards work for me, even when taking them directly from the bootstrap website with the most up to date versions of bootstrap, jquery, etc. could this be due to incorporating flexbox in this tutorial???

Leave a Reply