[ad_1]
https://i.ytimg.com/vi/xVjYT-Eu-N8/hqdefault.jpg
link for code: https://drive.google.com/drive/folders/1C-kb_g65885eoyaLuWwQu-OgZf51vVAm?usp=sharing
In this video tutorial, I’m going to tell you how easily you can build a bootstrap 4 website.If you follow this video from start to end, you also can make a professional website using Bootstrap 4. Here you going to learn about bootstra4 navbar, carousel, bootstrap 4 card, bootstrap 4 media object, accordion and bootstrap 4 tabs.
you can also this video for:
Build a website with Bootstrap 4
Build a website with bootstrap
how to build a website with bootstrap
create a website with bootstrap
bootstrap 4 setups,
create a website using bootstrap
bootstrap 4 for beginners
how to create a website
bootstrap 4
how to create a website with bootstrap
how to create a website bootstrap
bootstrap 4 websites built from scratch in 1 hour
website designing using bootstrap
bootstrap 4 website tutorial
bootstrap 4 website
bootstrap 4 website templates
Designing website with bootstrap 4
Introduction to Bootstrap 4
bootstrap 4 tutorial for beginners
bootstrap 4 tutorial
Web designing using bootstrap 4,
google search, bootstrap 4
how a design a website in Bootstrap,
bootstrap 4 e-commerce
bootstrap e-commerce website tutorial
bootstrap tutorial for beginners
how to design a website using Bootstrap 4
/*img hover effect*/
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
/*for remove padding*/
.padding-0{
padding-right:0;
padding-left:0;
}
/*testimonial*/
.testimonial{ margin: 0 20px 50px; }
.testimonial .pic{
display: inline-block;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 15px 15px 0;
}
.testimonial .pic img{
width: 100%;
height: auto;
border-radius: 50%;
}
.testimonial .testimonial-profile{
display: inline-block;
position: relative;
top: 15px;
}
.testimonial .title{
display: block;
font-size: 20px;
font-weight: 600;
color: #2f2f2f;
text-transform: capitalize;
margin: 0 0 7px 0;
}
.testimonial .post{
display: block;
font-size: 14px;
color: #5d7aa7;
}
.testimonial .description{
padding: 20px 22px;
background: #1f487e;
font-size: 15px;
color: #fff;
line-height: 25px;
margin: 0;
position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
content: “”;
border-width: 18px 0 0 18px;
border-style: solid;
border-color: #5d7aa7 transparent transparent;
position: absolute;
bottom: -18px;
left: 0;
}
.testimonial .description:after{
border-width: 18px 18px 0 0;
left: auto;
right: 0;
}
.owl-theme .owl-controls{
margin-top: 10px;
margin-left: 30px;
}
.owl-theme .owl-controls .owl-buttons div{
opacity: 0.8;
background: #fff;
}
.owl-prev:before,
.owl-next:before{
content: “f053”;
font-family: ‘FontAwesome’;
font-size: 20px;
color: #1f487e;
}
.owl-next:before{ content: “f054”; }
Original source
18 responses to “Bootstrap 4 website built from scratch in 1 hour 2018 (with code)”
Thanks you for this cool ved
please i have a problem with the testimonial area,i have added the javascript under my footer but the testimonial area still did not slide.
thanks for the tutorial i gain alot, you are so straight-forward not like others using a fake codes.
Thumbs up for you bro. Too good.
Its awesome but u should put an img of the whole webpage design so we can try to write our own bootstrap code just by orienting from the page desgn. 🙂
LOOKING FOR MORE GOOD VIDEOS LIKE THISS…
Muchas gracias por este gran video, que buen resultado 🙂
Sir! Thank you so much,you really helped me as a beginner in Bootstrap. I still need your help
thanks this is really good ……rishma97@gmail.com
thank you for the lesson has given me a lot of input in my knowledge but I have difficulties in continuing because the file that is in the link is not complete
Thanks sir…keep it up
nice one , really help
very nice site. thank you. how dont you have more subscribers you should have over 100k
Thank you so much bro. One question, so how do you upload this to your WordPress theme? Sorry, I am only an beginner.
very good work.I learnt a lot .i recommend it to everyone.
Nice tutorial bro…
Can i have the code.. here my email
Untung.silangin@gmail.com
nice bro, i have the same trouble with toggle icon mobile version in this video, now i can solve it. Thank you very much!
Make some more dynamic effect bro. ..