Bootstrap Grid Generator

How to Use the Generated Code

1. Copy Bootstrap Classes: Click "Copy Bootstrap Classes" to get classes (e.g., container-fluid, row, col-4). Add to your HTML structure.
2. Copy HTML: Click "Copy HTML" to get the complete grid container and items. Paste into your HTML file.
3. Download Full Code: Click "Download Full Code" to get a .html file with Bootstrap CSS (via CDN), styles, and HTML. Open in a browser to see the grid.
4. Setup Bootstrap: For your project, include Bootstrap via CDN (<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">) or install it (see Bootstrap documentation).
5. Customize: Edit .grid-item content (e.g., add images, text) and adjust styles.
Example (included in the downloaded file):

<style>
.grid-item {
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    border-radius: 3px;
    border: 1px solid #0077cc;
    margin-bottom: 15px;
}
</style>
                            

<div class="container-fluid">
    <div class="row g-3">
        <div class="col-4"><div class="grid-item">Item 1</div></div>
        <div class="col-4"><div class="grid-item">Item 2</div></div>
        ...
    </div>
</div>