Bootstrap 4 is the new version of bootstrap front-end framework, bootstrap framework is the world most popular mobile first responsive framework.
Bootstrap is the world most popular front-end framework, now mostly website front-end designs with bootstrap framework because bootstrap is mobile first responsive CSS, HTML && Javascript framework.now bootstrap 4 is the latest version of the bootstrap framework in bootstrap 4 version bootstrap team remove some features and add some new features in the new version and replace some bootstrap 3 components with a name like bootstrap 3 panel replace with the new name cards, I mean now in bootstrap 4 you can use CARD instead of panel. so in today article, we will create bootstrap 4 simple website layout. first, we need to download some important tools.
[Download Source Code ##download ##]
Important Tools:
[Download Source Code ##download ##]
Important Tools:
- Download Bootstrap 4 framework
- Download font-awesome icon library
- Download jQuery library
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Bootstrap4 Simple Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&subset=latin-ext" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-nav">
<div class="container">
<a class="navbar-brand logo" href="#">Youtube Creater</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learn and connect</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Benifit && awards</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Create Change</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Support && Guides</a>
</li>
</ul>
</div>
</div><!-- container -->
</nav>
<header>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="banner-title text-center">Visit a Space </h1>
</div>
</div><!-- row -->
<div class="row justify-content-center">
<div class="col-md-8">
<p>add here text</p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</header><!-- header -->
<section id="announce">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Twitter @YTCreators • Wed Oct 11 2017</h3>
<p>See how @GuavaRoi reaches his carb intake for the day 🍝 https://t.co/4M1uRg9hXZ https://t.co/RHWYimRvS0</p>
<img src="img/pexels-photo-325521.jpeg" class="img-fluid">
</div><!-- col -->
<div class="col-md-6">
<div class="right-area">
<h2 class="right-title">Announcing Our New Youtube Creator Site</h2>
<p>add here text</p>
</div><!-- right-area -->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- announce -->
<section id="video">
<div class="container">
<div class="row">
<div class="col-md-6">
<iframe width="560" class="youtue-video" height="315" src="https://www.youtube.com/embed/sis4_mYgAko" frameborder="0" allowfullscreen></iframe>
</div><!-- col -->
<div class="col-md-6">
<h4 class="youtube-4">YouTube Spotlight • Thu Sep 21 2017</h4>
<h2 class="youtube-2">YouTube Creators for Change: Abdel En Vrai</h2>
<p>add here text</p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- video-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<i class="fa fa-youtube fa-4x y-icon" ></i>
</div><!-- col -->
<div class="col-md-2 text-center">
<h4>Youtube</h4>
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Youtube Red</a></li>
</ul>
</div><!-- col -->
<div class="col-md-2 text-center">
<h4>Partner</h4>
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Youtube Red</a></li>
</ul>
</div><!-- col -->
<div class="col-md-2 text-center">
<h4>Resources</h4>
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Youtube Red</a></li>
</ul>
</div><!-- col -->
<div class="col-md-2 text-center">
<h4>Connect</h4>
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Youtube Red</a></li>
</ul>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</footer>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
And now create style.css file and copy the below code and paste in your filestyle.css
body{
marign:0;
padding:0;
font-family: 'Varela Round', sans-serif;
font-size: 16px;
}
.custom-nav{
border:0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
background-color: #fff!important;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.logo{
color:#FF0000!important;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
header{
height: 500px;
background: url(../../img/pexels-photo-209564.jpeg) no-repeat center center fixed;
background-color: rgba(0,0,0,0.3);
background-blend-mode: overlay;
color:#fff;
padding:125px 0px;
box-sizing: border-box;
}
.banner-title{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 70px;
}
#announce{
padding:40px 0px;
}
.right-title{
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 40px;
margin-bottom: 25px;
}
.right-area{
border-left: 1px dotted #2e2e2e;
padding-left: 15px;
}
.video{
padding:40px 0px;
background-color: #F8F8F8;
}
.youtube-2{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
margin: 30px 0px;
}
.youtube-4{
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 400;
}
footer{
background-color: #282828;
margin-top: 80px;
padding:60px 0px;
}
.fa-youtube{
color:#FF0000;
}
footer h4{
color:#fff;
margin-bottom: 20px;
}
footer ul{
margin:0;
padding:0;
}
footer ul li{
list-style: none;
}
footer ul li a{
color:orange;
}
@media (max-width: 500px){
.youtue-video{
width: 100%;
}
.y-icon{
margin: 15px;
}
}
Now save your file and open your index.html page in your browser and you were done!
COMMENTS