There are many online and offline static site builders to help you building a site in minutes. Most of these site builders basically use one of the existing frontend frameworks. Frankly, you don’t need to rely on these site builders and start building your own site and themes directly with frameworks like Bootstrap. In this article let us explore more on how to create Bootstrap theme from scratch using version 4.
Steps to Create Bootstrap Theme From Scratch
- Prepare your theme’s wireframe sketch
- Understanding Bootstrap 4 starter template
- Insert navigation menu
- Add header slideshow
- Include hero header section
- Showcase featured section
- Add FAQ and contact form
- Insert footer section
- Customizing with CSS
- Get final template
Further sections are explained with dummy content and images, ensure to replace them with your own content.
1. Drawing the Skeleton of Your Theme
Before proceeding let us first draw how our theme should look like focusing on using the default Bootstrap components. Basically a theme should have the following components:
- Navigation bar to show menu items.
- Header slideshow to rotate images with caption
- Hero header section for showing eye catching headline
- Featured section to show your products or highlights
- FAQ and Some contact details
- Footer section for copyright message
So, the theme should look something like below:
Let’s build our theme from scratch now.
2. Bootstrap 4 Starter Template
It’s a good idea to have some knowledge of what is Bootstrap. We have separate category on Bootstrap tutorials which you can refer for more details. Otherwise simply assume, Bootstrap is a frontend framework offers precompiled CSS and JavaScript files. These files have website blocks that can be used as it is or customized to suit your needs.
In our example we start with the Bootstrap starter template. This is a skeleton template including CSS and Script files as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
Add Your Content Here...
<!-- Bootstrap 4 Scripts -->
<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>You can also host the Bootstrap files on your server and replace the CDN links with your own. We are using Bootstrap version 4 for building our theme. Save the starter template as “bootstrap-theme.html” to your local computer and open the file using your favorite text editor. We recommend using Notepad++, Brackets or similar text editors for easy editing.
3. Adding Navigation to Starter Template
First step is to add navigation bar using navbar component. Below is the code for default Bootstrap 4 navbar component:
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo">
Bootstrap 4 Theme</a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto ml-auto">
<li class="nav-item outframe">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item outframe">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item dropdown outframe">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown 3</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br><br>The navigation bar contains the following items:
- Favicon
- Brand name
- Menu items – single and dropdown menu items
- Sample search box
This menu should be changed to a hamburger icon on smaller devices. Insert the default navbar component code by modifying the dummy content with your own just below <body> tag. Remember this is our first component on the theme, hence ensure to add the code just below the <body> tag as a first item.
4. Adding Slideshow or Carousel
Below the navbar let us insert the standard carousel component with image caption and description. We made the images full width by adding inline style “width=”100%”;”. Otherwise ensure to use the larger images which will be fitting to the width of the device.
<!-- Carousel -->
<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 1</h3>
<p>Here is short description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 2</h3>
<p>Here is short description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 3</h3>
<p>Here is short description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Be caution that navbar and carousel may be overlapping. You should use correct image height or use custom CSS to adjust the overlapping. In this example we simply add two line breaks <br><br> below the navbar to adjust the gap with the carousel.
5. Adding Hero Section or Jumbotron
Next let us add a full width jumbotron component to showcase a hero section with heading, description and a button. The code for header hero section is given below which should be added just below the carousel code:
<!-- Hero Header Jumbotron -->
<div class="jumbotron">
<h1 class="display-3">Bootstrap 4 Template</h1>
<p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p>
<hr class="my-4">
<p>Add your subtitle here to explain more about this page in detail.</p>
<a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a>
</div>We make the background white and adjusted the properties of default jumbotron with custom CSS like below. Add the custom CSS between <head>….</head> tags.
<style>
/* Header Jumbotron */
.jumbotron{
color: #990000;
background-color: #fafafa;
margin-bottom: -20px;
background: #fff;
text-align: center;
border-radius: 0;
}
</style>Now our Bootstrap 4 theme should look something like below:
6. Adding Featured Section with Card Layout
Bootstrap has a beautiful card component to showcase featured sections with image, title, description and a button. Let us showcase three products using deck card layout like below.
Below is the code for card layout which should be added just below the hero jumbotron component. You can add “Add to Cart” or “Buy Now” button code from PayPal or any other payment processor on the button element to collect payments from users.
<!-- Card Deck -->
<div class="card-deck">
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 1</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
<button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Here is a shorter description of the card.</p>
<button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 3</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
<button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>7. Splitting into Two Columns
The next section has two columns – one for adding a FAQ section and other for adding a contact form as shown below:
The two columns are created by using a div with row class and then two more divs with “col-md-6” class like below:
<div class="row">
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<!-- FAQ Collapse -->
</div>
</div>
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<!-- Contact Form -->
</div>
</div>
</div>7.1 Adding FAQ in First Column with Collapse
FAQ section is created using default collapse component like below:
<!-- Collapse -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header btn-spl" role="tab" id="firstheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
Heading 1
</a>
</h5>
</div>
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading">
<div class="card-block">
Here is the content for the first section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="secondheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Heading 2
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
<div class="card-block">
Here is the content for the second section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Heading 3
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
Here is the content for the third section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3">
Heading 4
</a>
</h5>
</div>
<div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="card-block">
Here is the content for the third section.
</div>
</div>
</div>
</div>7.2 Adding Contact Form in Second Column Using Form
Contact form is created with default Bootstrap 4 form component with name, option to choose from the dropdown, a textarea to enter comment a submit button.
<!-- Form -->
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<h3 class="title"><span>Contact Us</span></h3>
<form>
<!-- Text Input -->
<div class="form-group">
<label for="username">Enter Username:</label>
<input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
</div>
<!-- Single Select -->
<div class="form-group">
<label for="singleselect">Choose Option:</label>
<select class="form-control" id="singleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="textarea">Enter Your Comment:</label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-success btn-spl btn-md">Submit</button>
</form>
</div>
</div>8. Adding Footer
Finally let us add a full width footer using fluid jumbotron.
<!-- Footer -->
<div class="jumbotron-fluid">
<div class="container">
<h2 style="padding-bottom: 30px">This is a footer section of your page.</h2>
<p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p>
</div>
</div>The footer needs a bit of customization with the following CSS:
/* Footer Jumbotron */
.jumbotron-fluid {
background: lightgrey;
padding: 50px;
text-align: center;
}Now your Bootstrap 4 template is ready, let us spice up with some custom CSS.
9. Adding Custom CSS
You can customize any component by adding your own CSS. In our example, let us add the following customizations:
- Add shadow effect to button, collapse and cards with an additional CSS class “.btn-spl”.
- Use “.outframe” class to add some margins to the menu items.
- Add divider to headings using “.title” and “.title span” classes.
- Adjust the overflow of the body and margin of the cards for better alignment on smaller devices.
10. Final Theme Template
Putting together all the custom CSS and the components the final single page Bootstrap 4 template should look like as shown in the demo here. This template is fully responsive and you can download the full code below. We have added a favicon link, meta description and title for your page in the header section. You can further add Google Analytics and advertisement code on the page as in the demo page.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="Your Favicon Image Link" />
<meta name="description" content="Meta Description for your Page.">
<title>Enter Title for Your Page</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* Hide Overflow */
body {
overflow-x: hidden;
}
/* Card Alignment */
.card {
margin: 30px;
text-align: center;
}
/* Header Jumbotron */
.jumbotron{
color: #990000;
background-color: #fafafa;
margin-bottom: -20px;
background: #fff;
text-align: center;
border-radius: 0;
}
/* Footer Jumbotron */
.jumbotron-fluid {
background: lightgrey;
padding: 50px;
text-align: center;
}
/* Margin for Menu */
.outframe {
padding: 0 20px;
}
/* Shadow Effect for Button, Collapse & Cards */
.btn-spl {
box-shadow: 0 1px 4px rgba(100, 20, 100, .6);
border-radius: 0px;
}
/* Heading with Divider */
.title {
line-height: 2.5;
text-align: center;
}
.title span {
display: inline-block;
position: relative;
}
.title span:before,
.title span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray;
top: 0;
width: 75%;
margin-top:35px;
}
.title span:before {
right: 100%;
margin-right: 15px;
}
.title span:after {
left: 100%;
margin-left: 15px;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo">
Bootstrap 4 Theme</a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto ml-auto">
<li class="nav-item outframe">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item outframe">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item dropdown outframe">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown 3</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br><br>
<!-- Carousel -->
<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 1</h3>
<p>Here is short description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 2</h3>
<p>Here is short description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 3</h3>
<p>Here is short description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Hero Header Jumbotron -->
<div class="jumbotron">
<h1 class="display-3">Bootstrap 4 Template</h1>
<p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p>
<hr class="my-4">
<p>Add your subtitle here to explain more about this page in detail.</p>
<a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a>
</div>
<h3 class="title"><span>Order Products</span></h3>
<!-- Card Deck -->
<div class="card-deck">
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 1</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
<button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Here is a shorter description of the card.</p>
<button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 3</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
<button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>
<hr class="my-5">
<div class="row">
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<h3 class="title"><span>Read FAQ</span></h3>
<!-- Collapse -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header btn-spl" role="tab" id="firstheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
Heading 1
</a>
</h5>
</div>
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading">
<div class="card-block">
Here is the content for the first section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="secondheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Heading 2
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
<div class="card-block">
Here is the content for the second section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Heading 3
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
Here is the content for the third section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3">
Heading 4
</a>
</h5>
</div>
<div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="card-block">
Here is the content for the third section.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form -->
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<h3 class="title"><span>Contact Us</span></h3>
<form>
<!-- Text Input -->
<div class="form-group">
<label for="username">Enter Username:</label>
<input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
</div>
<!-- Single Select -->
<div class="form-group">
<label for="singleselect">Choose Option:</label>
<select class="form-control" id="singleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="textarea">Enter Your Comment:</label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-success btn-spl btn-md">Submit</button>
</form>
</div>
</div>
</div>
<!-- Footer -->
<div class="jumbotron-fluid">
<div class="container">
<h2 style="padding-bottom: 30px">This is a footer section of your page.</h2>
<p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p>
</div>
</div>
<!-- Bootstrap 4 Scripts -->
<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>Now you can add more pages using default components like progress bars, alerts, badges, tables, etc. and link on the navigation menu accordingly. When you are planning to have multiple pages then we recommend to download the Bootstrap files on your computer and arrange the file structure like below:
Save all your custom CSS codes under “style.css” file and link the file in all your pages. Basically you can change the starter template with your hosted URLs with relative links like below (we host images on separate site, you can include the relative image URLs in the HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 4 Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>You can continue adding as many as pages and modify the links on the navbar component. Once all the pages are ready, just upload them in the desired folder on your hosting server. Note, when you hosting precompiled files on your server, use “bootstrap.bundle.min.js”. This bundled version includes popper script, hence you don’t need to include “popper.js” in the template. The possibilities are infinite and you just need to spend few days of time to build your own theme or site.
Conclusion
Bootstrap 4 framework is more powerful than the previous version 3. When you are planning to build independent themes, it’s time to learn the tricks and start your own theme business. Even for the customizations you don’t need to spend too much of time. There are hundreds of free UI kits available on the net to make use for the customization of components to add professional look for your theme.
1 Comment
Leave your reply.