Learn Bootstrap 4 by building a website in 30 minutes

• Learn Bootstrap 4 in 30 minutes by building a landing page website
• Originally written by: SaidHayani@
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: Zheng7426
• Proofread by: Park-Ma, Moonliujk

From templatetoaster

New guidelines

“Bootstrap is an open source front-end code library designed for websites and web applications. Its HTML – and CSS-BASED design templates cover text design, forms, buttons, navigation, other interface components, and some JavaScript extensions. Unlike many other web frameworks, Bootstrap positions itself only for front-end development.” — Wikipedia

Before we get started, you can check out my full Bootstrap 4 tutorial. You can learn not only the new features of Bootstrap, but also how to use them for a better user experience.

There are several versions of Bootstrap, the latest of which is version 4. In this article we will use Bootstrap 4 to build a website.

You’re supposed to know

Before you start learning and using the Bootstrap framework, there are a few things you should know:

• HTML Basics
• CSS Basics
• And a little knowledge of JQuery

directory

Topics we’ll talk about during the process of building the site:

• Download and install Bootstrap 4
• New features in Bootstrap 4
• Bootstrap grid system
• The navigation bar
• The title
• button
• The about Me section
• Portfolio section
• The blog section
• card
• Team section
• Contact form
• The font
• After the effect
• conclusion

Download and install Bootstrap 4

There are three ways to add Bootstrap 4 to your project:

1. Via NPM (Node package Manager)

You can install Bootstrap 4 using this command — NPM install Bootstrap.

2. Over CDN (Content Delivery Network)

You can add this link between your project’s head TAB:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Copy the code

3. By downloading the Bootstrap 4 codebase and using it locally.

The structure of the project should look something like this:

New features in Bootstrap 4

What’s new with Bootstrap 4? How is it different from Bootstrap 3?

Compared to the previous version, Bootstrap 4 has some cool new features:

• Bootstrap 4 is written by Flexbox Grid, while Bootstrap 3 is written by float. Check out this tutorial if you haven’t heard of Flexbox.
• Bootstrap 4 is usedremThe CSS unit Bootstrap 3 usespx.Understand the difference between the two units
• Panels, Thumbnails, and Wells are all dropped in this new version. Want a more detailed look at the features removed and changes added in Bootstrap 4? Click here.

Forget these details for a moment, let’s move on to other important topics.

Bootstrap Grid System

The Bootstrap grid system helps create your layout and easily build a responsive website. The only change to the class name in Bootstrap 4 is the removal of the.xs class.

The grid is divided into 12 columns, so your layout will be based on these 12 columns. To use this grid system, you need to add a.row class to the main div.

Col-lg-2 // This class is suitable for large devices (such as laptops) col-MD-2 // This class is suitable for medium devices (such as tablets) col-SM-2 // This class is suitable for small devices (such as mobile phones)Copy the code

Navigation Bar

Bootstrap 4’s navigation wrapper is pretty cool, and it can be a big help when building a responsive navigation bar.

To use the navigation bar, add the navbar class to the file index. HTML:

<nav class="navbar navbar-expand-lg fixed-top ">
   <a class="navbar-brand" href="#">Home</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-4">
       
       <li class="nav-item">
         <a class="nav-link" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Post</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Contact</a>
       </li>
     </ul>
     
   </div>
</nav>
Copy the code

Create and add a main. CSS file to define your own CSS style.

In your index.html file, insert the following line between the two head tags:

<link rel="stylesheet" type="text/css" href="css/main.css">
Copy the code

Let’s add some color to the navigation bar:

.navbar{
 background:#F97300;
}
.nav-link , .navbar-brand{
 color: #f4f4f4;cursor: pointer; } .nav-link{ margin-right: 1em ! important; } .nav-link:hover{ background:#f4f4f4;
 color: #f97300;
}
.navbar-collapse{
 justify-content: flex-end;
}
.navbar-toggler{
  background:#fff ! important;
}
Copy the code

The new Bootstrap grid is based on Flexbox, so you’ll need to use Flexbox properties to arrange site elements. For example, to put the navigation bar menu to the right, we add an illustration-content property and assign flex-end.

.navbar-collapse{  
 justify-content: flex-end;  
}
Copy the code

After that, add.fixed-top class to the navigation bar and give it a fixed position. To make the navigation background light, add.bg-light; For a dark background, add.bg-dark. For a light blue background, add.bg-primary.

The code should look like this:

.bg-dark{  
background-color:#343a40! important
}  
.bg-primary{  
background-color:#007bff! important
}
Copy the code

Header

<header class="header">  
    
</header>
Copy the code

Let’s try creating a header layout.

In order for the title to occupy the height of the Window object, we need to use a little JQuery code. Create a main.js file and place the link before the body in the index.html file:

<script type="text/javascript" src='js/main.js'></script>
Copy the code

Insert this little bit of JQuery code into main.js:

$(document).ready(function(){  
 $('.header').height($(window).height());

})
Copy the code

It would look cool if we added a nice background image to the title page:

/*header style*/
.header{
 background-image: url('.. /images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}
Copy the code

To make the title page look professional, add an overlay:

Add the following code to your index.html file:

<header class="header">  
  <div class="overlay"></div>  
</header>
Copy the code

Then add this code to your main.css file:

.overlay{ position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; Background: RGBA (244, 244, 244, 0.79); }Copy the code

Now we need to add the description to the title.

To add a description, first write a div and give it a class called.container.

.Container is a Bootstrap class that encapsulates your content and makes your layout responsive:

<header class="header">  
  <div class="overlay"></div>  
   <div class="container">  
      
   </div>  
    
</header>
Copy the code

After that, write another div that contains the description section.

<div class="description text-center">  
   <h3>  
    Hello ,Welcome To My officail Website  
    <p>  
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
    <button class="btn btn-outline-secondary">See more</button>  
   </h3>  
  </div>
Copy the code

We’ll write.description in the div class and add.text-center to make sure that the content in the description section appears in the center of the page.

Buttons

Now add a class named.btn btn-outline-secondary to the button element. Bootstrap also has a number of other classes designed for buttons.

Take a look at some examples:

• CodePen Embed – Button in Bootstrap 4: Various button styles

Here is the.description CSS code in the main. CSS file:

.description{  
    position: absolute;  
    top: 30%;  
    margin: auto;  
    padding: 2em;

}  
.description h1{  
 color:#F97300 ;  
}  
.description p{  
 color:# 666;font-size: 20px; width: 50%; The line - height: 1.5; } .description button{ border:1px solid#F97300;  
 background:#F97300;  
 color:#fff;  
}
Copy the code

At this point, our headline would look something like this:

Is it cool? 🙂

“About me” section

We will use some Bootstrap mesh to divide the plate in two. To start using grids, we have to make the.row class parent div. (Put the div on the outside)

<div class="row></div>
Copy the code

The first section will be on the left and will contain an image. The second section will be on the right and contain a description.

Each div takes up six columns — that is, half the space of the entire section. Remember that a grid is divided into 12 columns.

Inside the first left div:

<div class="row"> // left <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
</div>
Copy the code

After adding HTML elements to the right pane, the structure of the code would look something like this:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
   </div>
   <div class="col-lg-8 col-md-8 col-sm-12 desc">
     
    <h3>D.John</h3>
    <p>
       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>
</div>
Copy the code

Here’s how I changed the look:

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: # 888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:# 888;
}
Copy the code

Portfolio

Now let’s go ahead and create a portfolio section that contains a gallery.

The structure of the HTML code for the portfolio section looks like this:

<! -- portfolio --> <div class="portfolio">
     <h1 class="text-center">Portfolio</h1>
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port13.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port6.png" class="img-fluid">
   </div>
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/electric.png" class="img-fluid">
   </div>
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</div>
Copy the code

Add.img-fluid to each image to make it responsive.

Each image in our gallery will occupy 4 columns (remember, COL-MD-4 is for medium devices, col-LG-4 is for large devices), which is 33.3333% of the width of large devices (such as desktops and large tablets). Similarly, the 12 columns on a small device (such as a cell phone) will take up 100% of the entire container width. Add some styles to our gallery:

/* portfolio */. Portfolio {margin: 4em 0; position: relative; } .portfolio h1{ color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
}
Copy the code

Blog Section (Blog)

Card

The cards in Bootstrap 4 make blog design much easier. These cards are good for articles and posts.

To create the card, we use a class named.card and write it inside a div element.

This card class contains several features:

• .card-header: Defines the title of the card
• .card-body: Used for the body of a card
• .card-title: Title of the card
• card-footer: Defines the footnote of the card
• .card-image: Image for the card

So, the HTML of our site would look something like this:

<! -- Posts section --> <div class="blog">
 <div class="container">
 <h1 class="text-center">Blog</h1>
  <div class="row">
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/polit.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/images.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
        <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/imag2.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
Copy the code

We need to add some CSS to the card:

.blog{  
 margin: 4em 0;  
 position: relative;   
}  
.blog h1{  
 color:#F97300;  
 margin: 2em;   
}  
.blog .card{  
 box-shadow: 0 0 20px #ccc;  
}  
.blog .card img{  
 width: 100%;  
 height: 12em;  
}  
.blog .card-title{  
 color:#F97300;  
    
}  
.blog .card-body{  
 padding: 1em;  
}
Copy the code

With the addition of the blog section, the site will look something like this:

Is it really flashy? 😄

Team Section

In this section we will use a grid system to evenly distribute the space between images. Each image occupies 3 columns of the container (.col-MD-3) — equivalent to 25% of the entire space. Our HTML structure:

<! -- Team section --> <div class="team">
 <div class="container">
    <h1 class="text-center">Our Team</h1>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Manager</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-3.jpg" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.enginner</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-3.jpg" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Team Manger</span>
   </div>
  </div>
 </div>
</div>
Copy the code

Now add some styles:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
}

Copy the code

It would be nice to animate an overlay over the image’s hover effect 😄.

To do this, add the following style styles to main.css:

.team .item:hover .des{  
 height: 100%;  
 background:#f973007d;  
 position: absolute;  
 width: 89%;  
 padding: 5em;  
 top: 0;  
 border-bottom-left-radius: 0;  
}
Copy the code

Super cool! 😙

Contact Form

Before we finish, the contact form is the last section that needs to be added 😃.

This section will contain a form from which visitors can send emails or provide feedback. We’ll use some Bootstrap classes to make the design look nice and responsive.

Just like Bootstrap 3, Bootstrap 4 uses a class called.form-control for input fields, But there are some new features that can be used — such as switching from using.input-group-addon (which has been disabled) to **. Input-group-prepend ** (which uses icon as label).

To learn more about this, check out the Bootstrap 4 documentation. In our contact form we will encapsulate the input field between each div that has class.form-group. Now the code for the index.html file will look like this:

<! Contact form --> <div class="contact-form">
 <div class="container">
  <form>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h1>Get in Touch</h1> 
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 right">
       <div class="form-group">
         <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
       </div>
       <div class="form-group">
         <input type="email" class="form-control form-control-lg" placeholder="[email protected]" name="email">
       </div>
       <div class="form-group">
         <textarea class="form-control form-control-lg">
          
         </textarea>
       </div>
       <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
    </div>
   </div>
  </form>
 </div>
</div>
Copy the code

Style of contact section:

main.css

.contact-form{
 margin: 6em 0;
 position: relative;  
}
.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: # 888;
 font-size: 16px;
}
Copy the code

Fonts (Font)

I think the system has ugly fonts, so I use Google Font interface, and then choose Raleway in Google Font. This is a good font and fits our sample very well.

Add this link to your main.css file:

@import url('https://fonts.googleapis.com/css?family=Raleway');
Copy the code

Then set the global style styles for the HTML and title tags:

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}
Copy the code

Scroll Effect

The last thing missing is the stroke effect. Now we’re going to use some JQuery. If you’re not familiar with JQuery, don’t worry, just copy and paste the following code into your main.js file:

$(".navbar a").click(function(){  
  $("body,html").animate({  
   scrollTop:$("#" + $(this).data('value')).offset().top  
  },1000)  
    
 })
Copy the code

Then add data-value to each navigation bar link:

<li class="nav-item">  
         <a class="nav-link" data-value="about" href="#">About</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="blog" href="#">Blog</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="team" href="#">  
         Team</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="contact" href="#">Contact</a>  
       </li>
Copy the code

Add an ID attribute to each section.

Remember: For the pull effect to work properly, the ID must be exactly the same as the data-value property in the navigation link:

<div class="about" id="about"></div>
Copy the code

conclusion

Bootstrap 4 is a great option for building your web application. It provides high-quality UI elements and is easy to customize, combine with other frameworks, and use. Not only that, it also helps you add responsiveness to your web pages, so it can be a great experience for your users.

Documentation on the project can be found here.

To learn Bootstrap 4, you can also check out my Bootstrap lessons:

• The Bootstrap 4 crash course: from basic to advanced | Said Hayani | SkillshareIn this course you will learn Bootstrap version 4, a CSS framework for building flexible pages and…

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

---

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.