Creating a Mobile-Ready Website in WebStorm with Bootstrap

This guide will show you how to use WebStorm to create a responsive website using HTML, CSS, JavaScript, and Bootstrap.

FINAL Example.html and example.css

The site will feature a horizontal navigation bar that transforms into a hamburger menu on smaller screens.

Step 1: Install and Set Up WebStorm

Download and Install WebStorm
- Get WebStorm from JetBrains WebStorm.
- Install it and open the IDE.
Create a New Project
- Click File → New Project.
- Choose Empty Project or Static Web Project.
- Set a project folder (e.g., bootstrap-website).

Step 2: Add Bootstrap to the Project

Create the HTML File
- In the bootstrap-website folder, create a new file:
  index.html

Include Bootstrap (CDN) in Example.html

Open index.html and add the following:

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Responsive Navbar</title>
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      <!-- Custom CSS -->
      <link rel="stylesheet" href="example.css">
      <!-- Bootstrap JS (Required for Navbar Toggle) -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
  </head>
  <body>

Step 3: Create the Responsive Navbar

Understanding the <nav> Tag

The <nav> tag is an HTML5 semantic element that represents a navigation section in a webpage. It is used to define menus, links, or navigation components. In this case, it is used to create a Bootstrap-based navigation bar.

Add this Bootstrap Navbar inside the <body> tag:

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container">
             <a class="navbar-brand" href="#">MyWebsite</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                     <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                     <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                 </ul>
             </div>
         </div>
     </nav>

Breaking Down the Bootstrap Classes in the <nav> Element

Class	Purpose
navbar	Applies Bootstrap's built-in navigation bar styling.
navbar-expand-lg	Controls when the navbar collapses. Large screens show full navbar, smaller screens collapse into a menu.
navbar-dark	Applies Bootstrap’s dark theme styling.
bg-dark	Sets the background color of the navbar to dark.

Child Elements Explanation

Element	Purpose
<a class="navbar-brand">	Displays "MyWebsite" as the site brand or logo.
<button class="navbar-toggler">	The hamburger menu button that appears on mobile screens.
<div class="collapse navbar-collapse">	The collapsible container for the menu items.
<ul class="navbar-nav ms-auto">	The list of menu links, aligned to the right (ms-auto).
<li class="nav-item">	Each menu link wrapped in <li> for better structure.

Step 4: Add Content to the Page

   <header class="bg-primary text-white text-center py-5">         <h1>Welcome to My Website</h1>         <p>Responsive design with Bootstrap</p>     </header>       <main class="container my-5">         <div class="row">             <div class="col-md-6">                 <h2>About Us</h2>                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>             </div>             <div class="col-md-6">                 <h2>Our Services</h2>                 <p>Providing top-notch solutions for your needs.</p>             </div>         </div>     </main>

Explanation of the <header> and <main> Tags

<header> Tag

Class	Purpose
bg-primary	Sets the background color to Bootstrap's primary blue.
text-white	Changes text color to white for better contrast.
text-center	Centers the text horizontally.
py-5	Adds vertical padding (py = padding on the y-axis, 5 = large padding).

<main> Tag

Class	Purpose
container	Centers content and applies responsive margins and paddings.
my-5	Adds vertical margin (m = margin, y = vertical, 5 = large spacing).
row	Defines a Bootstrap row for responsive layout.
col-md-6	Creates two equal-width columns on medium (md) screens and larger.

Step 5: Create a CSS File for Custom Styling

Create a new file in WebStorm: example.css
Add styles:

/* Add padding to the navbar brand */
  .navbar-brand {
      font-size: 1.5rem;
      font-weight: bold;
  }

    
/* Custom header section */
  header {
      background: linear-gradient(90deg, #007bff, #0056b3);
      padding: 40px 0;  }


/* Center content in small screens */
  @media (max-width: 768px) {
      .navbar-nav {
          text-align: center;
      }  }

/* Custom styling for the main content */
  .container {      max-width: 900px;  }
    /* Style the heading text */
  h1, h2 {
      font-family: Arial, sans-serif;
  }

Final Example.html

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Responsive Navbar</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="example.css">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
  </head>
  <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div class="container">
              <a class="navbar-brand" href="#">MyWebsite</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav ms-auto">
                      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                  </ul>
              </div>
          </div>
      </nav>
  </body>

  </html>