Create Custom Bootstrap Themes

BTH Industrial Training Program

Bootstrap is the most popular framework for developing responsive, mobile-first projects on the web. It is a free and open source toolkit for developing websites with HTML, CSS and Javascript. Bootstrap provides base styling for most HTML elements, comes with a great grid system and good collection of ready made components that can help you to easily get started and quickly and make your ideas into reality. Most of the contemporary websites and web templates are designed with Bootstrap because of its varied functionalities and features.

This blog  will show you how to customize Bootstrap and create your own Bootstrap themes using Sass, Gulp and the Bootstrap source code. The result will be a theme that you can apply to new and existing Bootstrap 4 projects to give them a new and fresh look.

If you prefer a less code-intense approach, you can also check out this Bootstrap builder which offers a web interface to customize the default Bootstrap theme. This  will show you how to build a Bootstrap theme from scratch.We will start with a simple HTML page, and then add more and more components, until we have a fully functional, personal and responsive website.

Example :

<head>
  <style>
  .bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
  </style>
</head>

<body>
  <div class="container-fluid bg-1 text-center">
    <h3>Who Am I?</h3>
    <img src="bird.jpg" alt="Bird" class="img-circle" >
    <h3>I'm an adventurer</h3>
  </div>
</body>

The result will look like this, and you are free to modify, save, share, use or do whatever you want with it:

Who Am I?

Bird

I'm an adventurer