Create Bootstrap 4 Simple Website

4 0 Friday, October 13, 2017

Bootstrap 4 is the new version of bootstrap front-end framework, bootstrap framework is the world most popular mobile first responsive framework.

What is Twitter Bootstrap 4 Frmework?

Bootstrap 4 is the latest version of the Twitter Bootstrap front-end designing framework, so in this article, we will create a simple website using the Twitter Bootstrap 4 latest version. In the Bootstrap 4 version Bootstrap team update a lot of CSS classes Bootstrap 3 panels replace on Cards in Bootstrap 4 and much more and Bootstrap 3 users can very easily use the Bootstrap 4 version, so don't worry if you are not familiar with Bootstrap 4 version.

[Download Source Code ##download ##]
bootstrap 4

Important Tools:

  1. Download Bootstrap 4 framework
  2. Download font-awesome icon library
  3. 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&amp;subset=latin-ext" rel="stylesheet"> 
 <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&amp;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 a style.css file and copy the below code and paste in your file

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


Labels:

Reactions:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER: 4
Loading...
DISQUS
Name

ajax,1,HTML & CSS,11,PHP,6,
ltr
item
webtipstricks: Create Bootstrap 4 Simple Website
Create Bootstrap 4 Simple Website
Bootstrap 4 is the new version of bootstrap front-end framework, bootstrap framework is the world most popular mobile first responsive framework.
https://4.bp.blogspot.com/-Pz6azNVwiZ0/WtOIb0l7fRI/AAAAAAAABhg/L6a0JYV8GwINwHPUuWuXXHeL46LC7bJZQCLcBGAs/s640/bootstrap4%2Bsimple%2Bwebsite.png
https://4.bp.blogspot.com/-Pz6azNVwiZ0/WtOIb0l7fRI/AAAAAAAABhg/L6a0JYV8GwINwHPUuWuXXHeL46LC7bJZQCLcBGAs/s72-c/bootstrap4%2Bsimple%2Bwebsite.png
webtipstricks
http://www.webtipstricks.com/2017/10/bootstrap4-simple-website.html
http://www.webtipstricks.com/
http://www.webtipstricks.com/
http://www.webtipstricks.com/2017/10/bootstrap4-simple-website.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy