Diversify India dialog box

About Bootstrap Playground

Explore this online Bootstrap editor—a versatile platform to write, execute, and test your code with instant live previews and a powerful console. This tool is optimized for both desktop and mobile devices, ensuring seamless access wherever you are.

Key Features

  • Smart Code Editor: Experience an advanced code editor with built-in code completion powered by Prism Code Editor. Enjoy faster and more accurate coding with intelligent suggestions.
  • Bootstrap 5 Integration: Leverage the latest features of Bootstrap 5, seamlessly supported by Diversify India’s robust and intuitive console.
  • User-Friendly Interface: Navigate effortlessly with a clean and responsive design tailored for developers of all levels.
  • Local Storage Support: Store your code securely in your browser’s local storage, ensuring your progress is never lost.
  • Lightweight and Feature-Rich: Benefit from a lightweight yet powerful playground packed with essential features to enhance your coding experience.
  • Secure Sandbox Environment: Run your code in a secure sandbox designed to prevent malicious activities, offering a safe environment for experimentation.

About Bootstrap

Bootstrap is a popular free, open-source CSS framework designed for creating modern websites and web applications. It enables developers to build responsive, mobile-first designs with ease. Bootstrap comes with pre-built components and a grid system that simplifies the design process, making it a go-to tool for both beginners and professionals.

Examples of Bootstrap Usage

1. Responsive Grid System Example

Bootstrap’s grid system helps create layouts that adapt to different screen sizes.

<div class="container">
    <div class="row">
        <div class="col-sm-6 bg-primary text-white text-center p-3">Column 1</div>
        <div class="col-sm-6 bg-secondary text-white text-center p-3">Column 2</div>
        <div class="col-lg-6 bg-success text-white text-center p-3">Column 3</div>
        <div class="col-lg-6 bg-warning text-dark text-center p-3">Column 4</div>
    </div>
</div>

2. Simple Navigation Bar Example

Bootstrap makes it easy to add a responsive navigation bar.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="about:srcdoc/#">MySite</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="about:srcdoc/#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="about:srcdoc/#">Features</a></li>
                <li class="nav-item"><a class="nav-link" href="about:srcdoc/#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

3. Offcanvas Example

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Button with data-bs-target</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Bootstrap offcanvas example.</p>
    </div>
</div>