Create Bootstrap 4 Simple Website

3 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.

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 ##]
bootstrap 4

Important Tools:

  1. Download Bootstrap 4 framework
  2. Download font-awesome icon library
  3. Download jQuery library 
After downloading the required tools now you need to create a simple index.html page and copy the below code and paste in your index.html page.

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 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: 3
Loading...
DISQUS
Name

bootstrap,2,CSS,7,Example,2,HTML,7,login,1,mysql,3,PHP,5,
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