Novice Webmaster: Doing One-Page on Bootstrap 4 in Half an Hour

Original author: Saad Hayani
  • Transfer
The Bootstrap framework is a free set of tools for creating site interfaces and web applications. Its capabilities are focused exclusively on front-end development. Bootstrap is a very popular project, which, for example, is indicated by the fact that it occupies (as of early March 2018) the second place in terms of the number of stars on GitHub.


If you want to learn Bootstrap, in particular, its latest, fourth version, then this material has been prepared especially for you. Here, with a small cross-cutting example that can be mastered in half an hour, the basics of Bootstrap will be demonstrated, having figured out which you will be able to do something your own, using this framework.

Prerequisites


This material is targeted at novice web developers who know the basics of HTML, CSS, and jQuery.

Here is a one-page website that we will talk about creating with Bootstrap.


Ready-made project created by Bootstrap

Download and Install Bootstrap


There are several ways to download and use Bootstrap. For starters, you can use npm . Here you need the following command:

npm install bootstrap

Bootstrap can be connected to a page using a content delivery network. To do this, add the following link to the tag <head> :

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

The latest version of Bootstrap can be downloaded from here and used locally.

The project structure should look like the following figure.


Project structure

About Bootstrap 4 Features


The first stable version of Bootstrap 4 was released in late January of this year. Bootstrap now includes some interesting features that were not in its previous version. Namely, if we talk about improvements and changes, the following can be noted:

  • Bootstrap 4 was rewritten using flexbox technology, while Bootstrap 3 used float technology. If you are not familiar with flexbox, take a look at this material .
  • In Bootstrap 4, CSS uses units of measure rem , while units of measure used to be px . Here you can find out how they differ.
  • Some components, such as panels, have been removed. Here you can find details about the changes made to Bootstrap 4.

In fact, Bootstrap 4 has a lot of new things compared to Bootstrap 3, if you need it, you can familiarize yourself with these innovations. We are starting to work on our training project.

Bootstrap Grid System


The Bootstrap Grid System is designed to create page layouts. It simplifies the development of responsive websites. Class names have not changed in the new Bootstrap version (it should be noted that the class .xs no longer exists).

The grid is divided into 12 columns, this structure, configured as the developer needs, is the basis of the page layout.

In order to use the Bootstrap grid, you need to add a class .row to the main element of the <div> page. When adjusting the sizes of nested elements, the following classes are used (instead of an asterisk, the end of the class name indicates the number of columns of the base 12-column grid that a particular element should occupy):

  • col-lg-* - a class used for pages designed for devices with a large screen like laptops;
  • col-md-* - a class for pages designed for devices with a medium-sized screen, such as tablets;
  • col-sm-* - a class for pages that are designed for small screens, for example, such as smartphones.

Navigation bar


The navigation bars in Bootstrap are created using the class .navbar . In fact, this is a wrapper in which the elements forming the navigation bar are placed. Below is the panel that we are going to create. It is located at the top of the page and does not disappear when scrolling.


Navigation panel
So, in order for the navigation panel to appear on the page, we add to the index.html tag <nav> with the class .navbar inside which, using other classes, like .navbar-brand , .navbar-toggler and .nav-item , create some special elements and the structure of the site navigation system. The class .fixed-top allows you to fix the navigation bar at the top of the page. Here is the layout of the navigation bar:

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

Now create a file main.css and connect it to the page by placing the index.html following main.css in the <head> file main.css tag index.html :

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

This will allow you to customize the styles of page elements by placing CSS rules in this file. Add to this CSS file rules that specify the color of 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;
}

The new Bootstrap grid is based on flexbox, so you need to use the appropriate properties to align the content. For example, in order to place the navigation bar menu on the right, you need to use the property justify-content and set its value to flex-end :

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

You can use the classes .bg-light (light background), .bg-dark (dark background), and .bg-primary (primary background color) to adjust the background color of the navigation bar .bg-primary . We use the following settings:

.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#343a40!important
}

Page header


To describe the page header, use the tag <header> :

<header class="header">
  
</header>

Prepare the layout for the page header. We want it to occupy the entire height of the window, so jQuery features come in handy here. Create a file main.js and attach it to index.html before the closing tag <body> :

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

Add the main.js following to the file main.js :

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

It would be useful to put some nice background image in the page header. Let's do it as follows:

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

That's what we ended up with.


Page header with a background image
While the site header looks empty, we’ll add an element to it by <div> assigning it a class .overlay , which will lead to the creation of a block that is located on top of the background image of the header. Change the part of the file index.html where we described the header as follows:

<header class="header">
  <div class="overlay"></div>
</header>

Then, in main.css , add the following:

.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

Now add the project description to the header. We will put it in a new element <div> with a class .containter . This is an auxiliary class of the Bootstrap framework, designed to accommodate content tailored to the needs of a responsive layout. Here's how the markup changes in this step:

<header class="header">
  <div class="overlay"></div>
   <div class="container">
    
   </div>
  
</header>

Now we add here one more element <div> to which we will assign a class .description :

<div class="description text-center">
   <h3><font color="#3AC1EF">▍
    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>
   </font></h3>
  </div>

We will also assign a class to this tag .text-center , which will allow us to align its contents in the center of the page. At the end of the site description there is a button. Let's talk about how to configure it.

Buttons


Bootstrap provides many classes for buttons. You can see some examples of button design here . We, as seen in the markup example from the previous section, added the .btn and <button> classes to the element .btn . btn-outline-secondary .

Now set the styles for the class .description :

.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #F97300;
 background:#F97300;
 color:#fff;
}

Here is how the page header will look after performing the above steps:


Page header containing the project description

About section


First, let's look at what we want to create. Here is a section of the web developer information page.


About section
Here we will take advantage of the Bootstrap grid to create a two-part section layout. Let's get started by adding a <div> class to the parent element of the section .row :

<div class="row"></div>

The first part of the layout will be located on the left, it will contain a photo. The second part, located on the right, will contain a description.

Here is the layout of the left side of this section:

<div class="row"> 
 // левая часть
<div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
</div>

And here's what happens after the description of the right side of the layout is added here:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" 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><font color="#3AC1EF">▍D.John</font></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>

Pay attention to setting the column width using the classes described above col-lg-* , col-md-* and col-sm-* .

Here are the styles for it all:

.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;
}

Portfolio Section


We will now take up the section in which the developer’s portfolio will be presented. It will contain a gallery of works.


Portfolio section.
When creating the layout of this section, the same principles of working with the grid that we considered above are applied:

<!-- 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 align="center" src="images/portfolio/port13.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port6.png" class="img-fluid">
   </div>
<div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/electric.png" class="img-fluid">
   </div>
<div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</div>

Adding a class .img-fluid to each of the images makes them responsive.

Each element in our gallery, on medium and large screens, occupies 4 columns (recall - the class is col-sm-12 used for devices with small screens, the class is col-md-4 used for medium screens, col-lg-4 for devices with large screens). As a result, on large and medium screens, one element will account for approximately 33.3% of the container element, on small devices each element will occupy the entire screen (12 columns).

We stylize the gallery of works:

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

Blog and Card Section


Let's talk about creating a section that contains announcements of materials from a blog hosted by our conditional web developer.


Blog Section
To create this section, we need the so-called cards (cards in Bootstrap terminology).

In order to create a card, you need to include an element in the layout <div> and add a class to it .card . The following classes can be used to configure various card elements:

  • .card-header : cap
  • .card-body : main content
  • .card-title : title
  • .card-footer : basement
  • .card-image : image

The HTML markup for this section will look 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 align="center" 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 align="center" 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 align="center" 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>

Here are the styles for the cards:

.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;
}

Here is what our one-page will look like after creating the Blog section:


Page after adding Blog section

Team Section


This section will contain information about the project team.


Section Team
To form this section, we will use the grid, equally dividing the available space between the images. Each image (on large and medium screens) will occupy 3 grid columns, which is 25% of the total space.

Here is the HTML markup for this section:

<!-- 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 align="center" 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 align="center" 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 align="center" 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 align="center" 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>

And here are the 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;
}

We will decorate this section with the animation that appears when you hover over the image. It should look like the image below.


Animation when you hover over the image
In order to achieve this effect, add the main.css following styles:

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

Feedback form


In this section of the page there will be a form with which site visitors can send messages to the site owner. Here, as usual, in order to stylize the elements and ensure their responsiveness, we will use the capabilities of Bootstrap.


Feedback Form
Like Bootstrap 3, Bootstrap 4 uses a class .form-control for input fields, but now there is something new. For example - instead of an obsolete class .input-group-addon , a new class is used .input-group-prepend (for icons and labels). Details can be found in the documentation for Bootstrap 4. In our case, each input field will be placed in the element <div> to which the class is assigned .form-group .

Add the index.html following to the file index.html :

<!-- 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="YourEmail@email.com" 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>

Here are the styles for the section with the feedback form that you need to put in the file 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;
}

Fonts


Standard fonts are not for everyone. Using the capabilities of the Google Font API, we will use the Raleway font in our project. He will look very good here. To import a font, add the main.css following directive to the file main.css :

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

Then set global styles for the various HTML tags:

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

Scroll effects


The image below shows the behavior of the page we want to achieve.


Scrolling the page when clicking on the links in the navigation bar
In order for the page, when you click on the links in the navigation bar
, to scroll smoothly to the desired section, we need to resort to the jQuery features. If you are not very familiar with this library, know that there is nothing complicated here - just add the code below to the file main.js :

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

After that, add an attribute data-value to each of the links in the navigation panel and bring the markup to the following form:

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

In order for all this to finally work, it remains only to add an attribute id to the main element of <div> each of the sections of the page. In this case, it is necessary to ensure that its value is identical to that specified in the attribute of the data-value corresponding link. For example, here is the corresponding attribute for the About section:

<div class="about" id="about"></div>

This completes our example. Here is the code for this project on GitHub.

Summary


Bootstrap 4 is a great tool for building web application interfaces. It gives the developer high-quality components that are easy to configure and work well together. In addition, Bootstrap allows you to create responsive layouts that look good on devices with different screens.

Dear readers! If your first practical introduction to Bootstrap took place today, tell me if you plan to use this framework in your projects?