There are many versions of Bootstrap, version 4 being the latest. In this recipe, we’re going to build a website using Bootstrap 4Prerequisites Before you get started, there are a few skills you’ll need to know to learn and use the Bootstrap framework:

• HTML Fundamentals
• Bootstrap Fundamentals
• Basic Knowledge of CSS
• Some Basics of JQuery

Learning Objectives After finishing this recipe

• You will feel comfortable using Bootstrap 4
• You will have a good understanding of “How jquery really works”
• You’ll also get a good hand with Html and CSS

Downloading and Installing Bootstrap 4 There are three ways to install and include Bootstrap 4 for your project:

• Use npm

You can install Bootstrap 4 by running this command npm install bootstrap 2. Use a content delivery network (CDN) by including this link in your project between parent tags: anonymous Step by Step

Navbar

The navbar container is great in Bootstrap 4. It is very useful when trying to create a responsive navbar. To get it, we’ll add the navbar class to our index.html file:

Create and include a main.css file so you can customize the CSS styling. Put this inside the main tag in your index.html file:

Let’s add some colors to our navigation bar:

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

The new Bootstrap Grid is built with the Flexbox system, so for alignment, you need to use a flexbox property. For example, to place the navigation bar menu on the right, we would add a justify-content property and set it to flex-end.

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

Add the .fixed-top class to the navigation bar to give it a fixed position. To make the background color of the navigation bar light, add .bg-light. For a dark background add .bg-dark and for a light blue background add .bg-primary. This is what it should look like:

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

Header

Let’s try to create a layout for the header. Here, we want to make sure that the header takes up the height of the window, so we’ll use a little JQuery code. First, create a file called main.js and include it in the index.html file before the closing body tag:

In the main.js file, insert this little JQuery code:

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

It would be great if we put a nice background image for the header:

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

Let’s add an overlay to make the header look a bit more professional: add this to your index.html file:

Then add this to your main.css file:

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

Now we need to add a description inside the header. To wrap our description, we’ll first create a div and give it a .container class. .container is a Bootstrap class that will help you wrap your content and make your layout more responsive:

Then add another div that will contain the description.

We’ll give it a .description class and add the .text- center class to make sure the content is placed in the center of the page.

Buttons

Add the .btn class btn-outline-child to the button element. there are many other Bootstrap classes for buttons. This is what the styling of .description looks like in the main.css file:

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

About the section

In this section, we’ll use Bootstrap Grid to split the section into two parts. To start our grid, we need to assign the .row class to the parent div.

The first section will be on the left and will contain an image, the second section will be on the right and will contain a description. Each div will occupy 6 columns — that means half the section. Remember that a grid is divided into 12 columns. In the first div on the left side:

After adding the HTML elements on the right-hand side , the structure of the code will look like this:

This is how we’ve made it look like: .about{ margin: 4em 0; padding: 1em; relative position; } .over h1{ color:#F97300; margin: 2em; } .over img{ height: 100%; width: 100%; border-radius: 50% } .about span{ display: block; colour: #888; position: absolute; left: 115px; } .over .desc{ padding: 2em; left border: 4px solid #10828C; } .over .desc h3{ color: #10828C; } .about .desc p{ line-height:2; colour:#888; }

Portfolio Section Now, let’s move on to the next part and make a portfolio section that will contain a gallery.

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

Add .img-fluid to each image to make it responsive. Each item in our gallery will occupy 4 columns ( (remember, col-md-4 for medium devices, col-lg-4 for large devices.) That works out to 33.33333% on large devices, such as large desktops and tablets, and 12 columns on a small devices (like iPhone, mobile) will take up 100% of the container Let’s add some styling to our gallery:

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

Blog Section

Cards

Cards in Bootstrap 4 make blog design much easier. Cards are suitable for articles and posts. To create a card, we use the .card class and assign it to a div element, the card class contains many features:

• .card-header: defines the card header
• .card-body: for the card body
• .card-title: the title of the card
• card-footer: defines the footer of the card.
• .card-image: for the card image

So, our website’s HTML should now look like this:

We need to add some CSS styling to the cards:

.blog{ margin: 4em 0; relative position; } .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; }

After adding the Blog section to our website, the layout should now look like this:

Team Section

In this section use the grid system to evenly distribute the space between images. Each image occupies 3 columns (.col-md-3) of the container — which equals 25% of the total space. Our HTML structure:

And let’s add some styling:

.team{ margin: 4em 0; relative position; } .team h1{ color:#F97300; margin: 2em; } .team .item{ position: relative; } .team .des{ background: #F97300; color: #fff; text alignment: center; lower-edge-left-radius: 93%; transition:.3 s entry and exit facility; }

It would be nice to add an overlay to the image on hover using animation. To achieve this effect, add the following styles to the main.css file:

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

Contact Form

The Contact Form is the last section to add, so we’re done. The Contact Form section will contain a form through which visitors can send an email or give feedback. We will be using some Bootstrap classes to make the layout beautiful and responsive. Like Bootstrap 3, Bootstrap 4 also uses the .form-control class for input fields, but added some new features, such as changing from .input-group-addon (deprecated) to . input-group-prepend (to use icons as labels). In our contact form, we’ll wrap each input between a div that has the class .form-group . The index.html file now looks like this:

Contact section styles: main.css

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

Fonts

We’re going to use the Google Fonts API and choose Raleway, which is a nice and appropriate font for our template. Add this link to your main.css file:

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

and set the global style to HTML and header tags:

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

Hover effect

The last thing missing is the hover effect. Here, we’ll have to use some JQuery. Don’t worry if you’re not familiar with it, just add this code in your main.js file:

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

and add a data attribute – value for each navbar link:

About

Wallet

Blog

Team

Contact

Set an id attribute for each section.Note: id must be identical to the value attribute of data in na bar link vegation to make scrolling work:

Conclusion

Bootstrap 4 is a great option to build and our app Web. It offers high-quality user interface elements and is easy to customize, integrate, and use. It will also help you to include responsiveness on your website and thus provide a premium user experience to your users.

.