create account

Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial) by rdvn

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @rdvn · (edited)
$3.42
Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)
![rdvn (2).jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519599774/bmg9h4d6rtrxvjazvjem.jpg)

### Details

<br> 

**Tutorial about:** Build a contemporary website with bootstrap  | Serie 3 (English Video Tutorial)

**Video Language :** English Language 

**Githup link:** [Bootstrap github](https://github.com/twbs/bootstrap)

>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. [Bootstrap more information.](https://getbootstrap.com/)

### What We Can Learn?
In this video tutorial we can learn about how to create a  contemporary website with bootstrap  codes. In this lesson we are going to look at how to  create three column and icon in column .Also , i will give them value and i will design them too  . I will add icons and i will carry them top of my columns text.   I'm going to do step by step. If you want to learn how to build website with bootstrap you can follow me.

### We Learn About
- How to edit  navbar.
- How to create column.
- How to create icons with fontawesome .
- How to edit icons size  . 
- How to edit bootstrap codes .


### Requirements
- **1-** Atom Program
- **2-** Bootstrap code knowledge.
- **3-** Basic CSS code knowledge.
- **4-** Basic HTML code knowledge.


### My Operating System
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379881/libdd6r5olbo0zfe18ct.png)

### Difficulty
- Intermediate level 


### Description
 In this video going to be showing you how to create a  contemporary website with bootstrap codes.You are going to see of part how  I created it. I will use atom program with this project . Firstly I'll call bootstrap codes from official website then I will start a project. I hope you like it. Let's go to the project!
I explained for this project with Bootstrap in video.

**Video Tutorial - English Language - 720p**
https://www.youtube.com/watch?v=faGncifls0A&feature=youtu.be

###### [Background image source](https://pixabay.com/tr/gece-kamera-foto%C4%9Fraf%C3%A7%C4%B1-canon-%C3%A7ekim-1927265/)
### Curriculum
- [Serie 1](https://utopian.io/utopian-io/@rdvn/build-a-contemporary-website-with-bootstrap-or-serie-1-or-english-video-tutorial)
- [Serie 2](https://utopian.io/utopian-io/@rdvn/build-a-contemporary-website-with-bootstrap-or-serie-2-english-video-tutorial)



### [BOOTSTRAP REPOSITORY](https://github.com/twbs/bootstrap)

###  More Details About Tutorial
 <br>
### Github Repository
Bootstrap  Github view.
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519475945/x1qh1zfqogyxkuypw6qr.png)

Project's Codes.
```
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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="css/style.css">
  </head>
  <body>
            <!-- nav bar -->
            <nav class="manuel-nav">
              <div id="logo">Photography</div>
              <ul id="links">

                  <li>Life Photo</li>
                  <li>Animal Photo</li>
                  <li>Nature Photo</li>
                </ul>
              </nav>


              <div id="container">
          <h1>Rdvn Photograpy</h1>
          <button type="button" class="btn btn-danger">See All Photo</button>
          </div>

          <div class="container">
            <div id="IconRow" class="row text-center">
              <div class="col-md-4">
                <i class="fa fa-camera-retro fa-4x" aria-hidden="true"></i>
                <h2>Nature</h2>
              </div>
              <div class="col-md-4">
                <i class="fa fa-anchor fa-4x"></i>
                <h2>Animal</h2>
              </div>
              <div class="col-md-4">
                <i class="fa fa-bug fa-4x"></i>
                <h2>Life</h2>
              </div>
            </div>
          </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
```
----------------------------------------------------------------------------------------------------------------

```
html, body {

  height: 100%;
  width:  100%;
}

.text-center {
  text-align: center;
}

.btn-danger {

      border-radius: 0;
      font-size: 15px;
}


#container {

  background: url('../images/img1.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -70px;
  position: relative;
  z-index: -50;

}

#container > h1 {

  color: azure;
  margin-top: -30px;
}

#IconRow {
padding: 60px 0;

}

.manuel-nav {

  background: transparent;
  height: 70px;
  width: 100%;
  z-index: 99999999;
}
.manuel-nav #logo {
color: red;
padding: 20px 0 0 25px;
font-size: 24px;
}

.manuel-nav #links,#logo {
display: inline-block;
}

.manuel-nav #links {

list-style: none;
padding: 0;
position: absolute;
top: 0;
right: 0;
padding: 20px 25px 0 0;
}
.manuel-nav #links > li {
display: inline-block;
color: red;
padding-right: 20px;
}

```


<br>
--------------------------
-----------------------------
 <center>Author : @rdvn</center>


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@rdvn/build-a-contemporary-website-with-bootstrap-or-serie-3-english-video-tutorial">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 95 others
properties (23)
authorrdvn
permlinkbuild-a-contemporary-website-with-bootstrap-or-serie-3-english-video-tutorial
categoryutopian-io
json_metadata{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":2126244,"name":"bootstrap","full_name":"twbs/bootstrap","html_url":"https://github.com/twbs/bootstrap","fork":false,"owner":{"login":"twbs"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","videotuts","video"],"users":["rdvn"],"links":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1519599774/bmg9h4d6rtrxvjazvjem.jpg","https://github.com/twbs/bootstrap","https://getbootstrap.com/","https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379881/libdd6r5olbo0zfe18ct.png","https://pixabay.com/tr/gece-kamera-foto%C4%9Fraf%C3%A7%C4%B1-canon-%C3%A7ekim-1927265/","https://utopian.io/utopian-io/@rdvn/build-a-contemporary-website-with-bootstrap-or-serie-1-or-english-video-tutorial","https://utopian.io/utopian-io/@rdvn/build-a-contemporary-website-with-bootstrap-or-serie-2-english-video-tutorial","https://res.cloudinary.com/hpiynhbhq/image/upload/v1519475945/x1qh1zfqogyxkuypw6qr.png"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1519599774/bmg9h4d6rtrxvjazvjem.jpg","https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379881/libdd6r5olbo0zfe18ct.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1519475945/x1qh1zfqogyxkuypw6qr.png"],"moderator":{"account":"espoem","time":"2018-02-27T12:04:39.837Z","reviewed":false,"pending":false,"flagged":true},"questions":[],"score":0}
created2018-02-26 15:17:15
last_update2018-02-27 12:04:39
depth0
children5
last_payout2018-03-05 15:17:15
cashout_time1969-12-31 23:59:59
total_payout_value2.524 HBD
curator_payout_value0.897 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6,512
author_reputation12,487,610,583,231
root_title"Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,625,010
net_rshares748,980,849,731
author_curate_reward""
vote details (159)
@arie.steem ·
$1.29
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
👍  
properties (23)
authorarie.steem
permlinkre-rdvn-build-a-contemporary-website-with-bootstrap-or-serie-3-english-video-tutorial-20180226t210404030z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-26 21:04:09
last_update2018-02-26 21:04:09
depth1
children3
last_payout2018-03-05 21:04:09
cashout_time1969-12-31 23:59:59
total_payout_value0.967 HBD
curator_payout_value0.321 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation43,266,931,781,631
root_title"Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,692,041
net_rshares228,357,983,652
author_curate_reward""
vote details (1)
@espoem · 
Hi, please the following comment. It is meant for rdvn but I do not want to create 2 separate comments.

<hr>

We feel that this kind of tutorial can't be approved in Utopian. You chose the Bootstrap as your main focus but you show only little from it in each of your parts.

The components you actually use in the tutorials are often the same as the examples from the documentation and there is missing the tutoring what you actually do with them, why and what other options can be done.

You create the tutorial as follow the same steps as I do but without enough teaching.

You could also work on your audio as there is often some noise and you are not heard clearly.

Please continue with your series but I must say that it will be better to submit it via Steemit.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authorespoem
permlinkre-ariesteem-re-rdvn-build-a-contemporary-website-with-bootstrap-or-serie-3-english-video-tutorial-20180227t120500136z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-27 12:05:06
last_update2018-02-27 12:05:06
depth2
children1
last_payout2018-03-06 12:05:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length887
author_reputation59,289,149,412,912
root_title"Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,853,234
net_rshares0
@arie.steem · 
i will dm you
properties (22)
authorarie.steem
permlinkre-espoem-re-ariesteem-re-rdvn-build-a-contemporary-website-with-bootstrap-or-serie-3-english-video-tutorial-20180227t155043225z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-02-27 15:50:42
last_update2018-02-27 15:50:42
depth3
children0
last_payout2018-03-06 15:50:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length13
author_reputation43,266,931,781,631
root_title"Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,899,547
net_rshares0
@utopian.tip · 
Hey @arie.steem, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
properties (22)
authorutopian.tip
permlinkre-re-rdvn-build-a-contemporary-website-with-bootstrap-or-serie-3-english-video-tutorial-20180226t210404030z-20180227t030326
categoryutopian-io
json_metadata""
created2018-02-27 03:03:27
last_update2018-02-27 03:03:27
depth2
children0
last_payout2018-03-06 03:03:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length160
author_reputation238,310,597,885
root_title"Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,755,323
net_rshares0
@utopian-1up · 
<div class="pull-left">

![1UP-Kayrex_tiny.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515383984/ekyf2thxg7j2t0qro1h3.png)

</div>

<div class="text-justify">


### You've got upvoted by <code>Utopian-1UP</code>!
You can give up to ten [1UP](https://steemit.com/utopian-io/@steem-plus/steemplus-2-4-utopian-1up-is-here)'s to Utopian posts every day after they are accepted by a Utopian moderator and before they are upvoted by the official @utopian-io account. Install the @steem-plus browser extension to use 1UP. By following the 1UP-trail using [SteemAuto](https://steemauto.com/) you support great Utopian authors and earn high curation rewards at the same time. 

<hr>

1UP is neither organized nor endorsed by Utopian.io!

</div>
properties (22)
authorutopian-1up
permlink20180228t072821364z
categoryutopian-io
json_metadata{"app":"1up"}
created2018-02-28 07:28:21
last_update2018-02-28 07:28:21
depth1
children0
last_payout2018-03-07 07:28:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length764
author_reputation2,324,758,056,093
root_title"Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,061,303
net_rshares0
Help/Feedback