[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
27 responses to “Bootstrap 4 Tutorial [#5] Hand-code a Responsive Website (Part 2)”
how to rearrange you code after past in brackets ???
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.
my cards height change according to the word count inside the p tag. How to fix taht.
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!
Hello! I would like to ask if anyone has been able to replicate the sliders on the tutorial? on alpha6 it is showing as lines but in the tutorials they're bullets. Thanks so much for the help.
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??
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%;
}
if bootstrap 4.0.0-alpha.6:
.btn-outline-success instead of .btn-success-outline;
flex-grow: 0 of .card-block to position images on one line.
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 & 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)
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.
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;
}
}
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???
how can you fix the formation of the code so fast? i need to reposition every single line and you just do it at once.
I mean the situation at 2:54, if it's unclear
7:43 kinda awkward but, Thanks for the video
awesome tuts!!!!
Hi +Brad Hussey. Awesome tute series! Although, I'm encountering a problem with Chrome. The carousel controls don't work there. For firefox, it just works fine.
"Making love with their hands… odd".
How about the height of carousel … ….. its more than screen height in my computer. Can we make it 100% .
Hi!
How I can use ->> #stage-caption>h1
anyone else had issues with the cards layout? i had to used thumbnails instead
For some reason my carousel doesn't work, did check couple of times, did copy and paste and id's were modified as tutorial but something is not working out :/
To paste code with tabbing In Sublime Text 3 you can just use ctrl+shift+v combination
You should've taught us the way you re aligned the carousel in Brackets. It's very hard to read for me because it isn't tabbed properly.
Your lorem ipsum is different from mine. Mine says more words.
What I need to do if my card have not the same height in the card groups
The max-width doesn't work in Firefox. Any suggestions?
Is the carousel now touch friendly? Shame that it doesn't seem so. Will still continue to use Slick Slider for my carousels coz of the touch ability.