September 12, 2026

Bootstrap 4 Grid System, Colors, Typography, Tables and Images Tutorial

Bootstrap 4 एक popular front-end framework है, जिसका इस्तेमाल responsive, mobile-friendly और professional websites बनाने के लिए किया जाता है। अगर आप HTML और CSS सीख रहे हैं या website development शुरू कर रहे हैं, तो Bootstrap 4 आपके लिए बहुत useful framework है।

Bootstrap की सबसे बड़ी खासियत यह है कि इसमें बहुत सारी ready-made CSS classes मिलती हैं। इन classes की मदद से आप बिना बहुत ज्यादा custom CSS लिखे website का layout, colors, typography, tables, images, buttons और अन्य elements आसानी से design कर सकते हैं।

इस tutorial में हम Bootstrap 4 के कुछ बहुत important concepts को आसान Hindi + English language में समझेंगे:

• Bootstrap 4 Grid System

• Bootstrap 4 Colors

• Bootstrap 4 Typography

• Bootstrap 4 Tables

• Bootstrap 4 Images

• Real-time website examples

आइए इन्हें step-by-step समझते हैं।

---

Bootstrap 4 क्या है?

Bootstrap एक open-source front-end framework है। इसका इस्तेमाल मुख्य रूप से HTML, CSS और JavaScript based responsive websites बनाने के लिए किया जाता है।

Bootstrap 4 में आपको कई ready-to-use classes और components मिलते हैं, जैसे:

• Grid System

• Buttons

• Cards

• Forms

• Tables

• Alerts

• Navbar

• Images

• Typography

• Colors

• Spacing utilities

उदाहरण के लिए, अगर आपको blue button बनाना है, तो आपको अलग से CSS लिखने की जरूरत नहीं है।

<button class="btn btn-primary">
    Click Here
</button>

बस btn और btn-primary classes लगाने से Bootstrap button को styling दे देता है।

---

1. Bootstrap 4 Grid System

Bootstrap 4 का Grid System website layout बनाने के लिए सबसे important features में से एक है।

Bootstrap का grid system 12-column layout पर आधारित है।

हम इन 12 columns को अलग-अलग तरीके से divide कर सकते हैं।

उदाहरण:

6 + 6 = 12
4 + 4 + 4 = 12
3 + 3 + 3 + 3 = 12
8 + 4 = 12
9 + 3 = 12

इसका मतलब है कि एक row की maximum width को 12 columns में divide किया जाता है।

Basic Grid Structure

Bootstrap Grid में सामान्यतः तीन चीजें इस्तेमाल होती हैं:

<div class="container">
    <div class="row">

        <div class="col-6">
            Left Content
        </div>

        <div class="col-6">
            Right Content
        </div>

    </div>
</div>

यहाँ:

• container website content को proper width देता है।

• row एक horizontal row बनाता है।

• col-6 12 में से 6 columns लेता है।

इसलिए दो col-6 मिलकर पूरी row को cover करते हैं।

Real-Time Example

मान लीजिए आप एक company website बना रहे हैं और आपको About Us section में left side पर text और right side पर image रखनी है।

<div class="container">
    <div class="row">

        <div class="col-8">
            <h2>About Our Company</h2>

            <p>
                We provide professional website design
                and digital marketing services.
            </p>
        </div>

        <div class="col-4">
            <img src="company.jpg"
                 class="img-fluid"
                 alt="Company">
        </div>

    </div>
</div>

यहाँ col-8 + col-4 = 12 है।

इसलिए left content 8 columns और right image 4 columns की width लेगी।

---

Responsive Grid System

Bootstrap का Grid System responsive website बनाने में बहुत useful है।

उदाहरण:

<div class="row">

    <div class="col-md-4">
        Website Design
    </div>

    <div class="col-md-4">
        SEO
    </div>

    <div class="col-md-4">
        Digital Marketing
    </div>

</div>

Desktop पर ये तीनों sections एक ही row में दिखाई दे सकते हैं:

| Website Design | SEO | Digital Marketing |

Mobile screen पर ये content vertically दिखाई दे सकता है:

| Website Design |

| SEO |

| Digital Marketing |

यही Bootstrap के responsive design का बड़ा फायदा है।

---

2. Bootstrap 4 Colors

Bootstrap 4 में पहले से कई predefined color classes available हैं। इन classes की मदद से आप text और background का color आसानी से change कर सकते हैं।

कुछ common Bootstrap color classes हैं:

text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-dark
text-muted
text-white

Text Color Example

<p class="text-primary">
    Primary Text
</p>

<p class="text-success">
    Success Message
</p>

<p class="text-danger">
    Error Message
</p>

<p class="text-warning">
    Warning Message
</p>

इन classes से आपको custom CSS लिखने की जरूरत कम हो जाती है।

---

Bootstrap Background Colors

Bootstrap में background के लिए भी predefined classes हैं।

<div class="bg-primary text-white p-3">
    Primary Background
</div>

<div class="bg-success text-white p-3">
    Success Message
</div>

<div class="bg-danger text-white p-3">
    Error Message
</div>

<div class="bg-warning p-3">
    Warning Message
</div>

यहाँ p-3 Bootstrap की spacing utility है, जो element के अंदर padding add करती है।

Real-Time Example

मान लीजिए किसी website पर payment successful होने के बाद message दिखाना है:

<div class="bg-success text-white p-3">
    Payment Successfully Completed!
</div>

और payment fail होने पर:

<div class="bg-danger text-white p-3">
    Payment Failed. Please Try Again.
</div>

इस तरह Bootstrap colors website में important messages को visually highlight करने में मदद करते हैं।

---

3. Bootstrap 4 Typography

Typography का मतलब website पर text की appearance और presentation से है।

Bootstrap 4 में headings, paragraphs, text alignment, font weight और display headings के लिए कई useful classes available हैं।

Bootstrap Headings

आप normal HTML headings का इस्तेमाल कर सकते हैं:

<h1>Bootstrap Tutorial</h1>
<h2>Grid System</h2>
<h3>Typography</h3>
<h4>Tables</h4>
<h5>Images</h5>
<h6>Colors</h6>

Bootstrap इन headings को default styling देता है।

---

Display Headings

अगर आपको बहुत बड़ा और attractive heading चाहिए, तो Bootstrap की display classes इस्तेमाल कर सकते हैं।

<h1 class="display-1">
    Learn Bootstrap 4
</h1>

Bootstrap में:

display-1
display-2
display-3
display-4

जैसी classes उपलब्ध हैं।

Example:

<h1 class="display-4">
    Learn Web Development
</h1>

यह landing pages और hero sections में काफी useful हो सकता है।

---

Text Alignment

Bootstrap में text alignment के लिए classes उपलब्ध हैं।

<p class="text-left">
    Left Aligned Text
</p>

<p class="text-center">
    Center Aligned Text
</p>

<p class="text-right">
    Right Aligned Text
</p>

अगर आपको website का heading center में दिखाना है:

<div class="text-center">
    <h1>Welcome to Our Website</h1>

    <p>
        Learn HTML, CSS and Bootstrap.
    </p>
</div>

---

Font Weight

Bootstrap text को bold या italic बनाने के लिए भी classes provide करता है।

<p class="font-weight-bold">
    Important Information
</p>

Normal text:

<p class="font-weight-normal">
    Normal Information
</p>

Italic text:

<p class="font-italic">
    This is italic text.
</p>

इन classes का इस्तेमाल headings और important information को highlight करने के लिए किया जा सकता है।

---

4. Bootstrap 4 Tables

Website में data दिखाने के लिए HTML tables का इस्तेमाल किया जाता है। Bootstrap 4 tables को professional और readable बनाने के लिए कई classes provide करता है।

सबसे basic class है:

<table class="table">

Basic Bootstrap Table

<table class="table">

    <thead>
        <tr>
            <th>Name</th>
            <th>Course</th>
            <th>Fees</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Rahul</td>
            <td>Web Design</td>
            <td>₹10,000</td>
        </tr>

        <tr>
            <td>Amit</td>
            <td>SEO</td>
            <td>₹8,000</td>
        </tr>

    </tbody>

</table>

Bootstrap .table class table को clean default styling देती है।

---

Striped Table

अगर आप alternate rows को अलग-अलग background में दिखाना चाहते हैं, तो:

<table class="table table-striped">

इससे large tables को पढ़ना आसान हो जाता है।

---

Bordered Table

अगर हर cell के चारों तरफ border चाहिए:

<table class="table table-bordered">

---

Hover Table

अगर mouse किसी row के ऊपर जाने पर row highlight होनी चाहिए:

<table class="table table-hover">

---

Real-Time Example: Student Result

School website या school management system में student result दिखाने के लिए Bootstrap table का इस्तेमाल किया जा सकता है।

<table class="table table-bordered table-hover">

    <thead class="thead-dark">

        <tr>
            <th>Student Name</th>
            <th>Maths</th>
            <th>Science</th>
            <th>English</th>
            <th>Result</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Rahul</td>
            <td>85</td>
            <td>90</td>
            <td>88</td>
            <td>Pass</td>
        </tr>

        <tr>
            <td>Amit</td>
            <td>78</td>
            <td>82</td>
            <td>80</td>
            <td>Pass</td>
        </tr>

    </tbody>

</table>

यहाँ हमने तीन Bootstrap classes का combination किया है:

table
table-bordered
table-hover

और header के लिए:

thead-dark

इस तरह simple HTML table को professional appearance मिल जाती है।

---

5. Bootstrap 4 Images

Modern website में images का responsive होना बहुत जरूरी है।

अगर image की width mobile screen से ज्यादा हो जाती है, तो website में horizontal scrolling की problem आ सकती है।

Bootstrap 4 में इसके लिए सबसे useful class है:

img-fluid

Basic Example

<img src="website.jpg"
     class="img-fluid"
     alt="Website Design">

img-fluid image को responsive बनाता है और image को उसके parent container की width के अनुसार adjust करने में मदद करता है।

---

Rounded Image

Bootstrap में image के corners को rounded करने के लिए:

<img src="photo.jpg"
     class="rounded"
     alt="Photo">

---

Rounded Circle

Profile photo या team member image के लिए:

<img src="profile.jpg"
     class="rounded-circle"
     alt="Profile">

इससे image circular दिखाई देती है।

---

Image Thumbnail

Image के चारों तरफ border और thumbnail-style appearance के लिए:

<img src="photo.jpg"
     class="img-thumbnail"
     alt="Photo">

---

Real-Time Example: Employee Profile

अब Grid, Typography और Images को combine करके एक practical example देखते हैं।

<div class="container">

    <div class="row">

        <div class="col-md-4 text-center">

            <img src="employee.jpg"
                 class="rounded-circle img-fluid"
                 width="200"
                 alt="Employee">

            <h3>
                Rahul Sharma
            </h3>

            <p class="text-muted">
                Web Developer
            </p>

        </div>

        <div class="col-md-8">

            <h2>
                About Me
            </h2>

            <p>
                I am a professional web developer
                with experience in HTML, CSS,
                Bootstrap and JavaScript.
            </p>

            <button class="btn btn-primary">
                Contact Me
            </button>

        </div>

    </div>

</div>

इस example में हमने कई Bootstrap features एक साथ use किए:

• container

• row

• col-md-4

• col-md-8

• text-center

• rounded-circle

• img-fluid

• text-muted

• btn

• btn-primary

इस तरह Bootstrap की अलग-अलग classes को combine करके professional website sections आसानी से बनाए जा सकते हैं।

---

Bootstrap 4 Classes Quick Revision

Feature	Important Classes
Grid	container, row, col-*
Text Color	text-primary, text-success, text-danger
Background	bg-primary, bg-success, bg-danger
Typography	display-1, font-weight-bold, text-center
Tables	table, table-striped, table-bordered, table-hover
Images	img-fluid, rounded, rounded-circle, img-thumbnail

---

Conclusion

Bootstrap 4 सीखते समय सबसे पहले Grid System, Colors, Typography, Tables और Images को समझना बहुत जरूरी है। ये concepts लगभग हर तरह की website में काम आते हैं।

Grid System की मदद से आप responsive layouts बना सकते हैं। Colors website के important elements और messages को highlight करने में मदद करते हैं। Typography text को professional और readable बनाती है। Tables structured data दिखाने के लिए useful हैं, जबकि Images को img-fluid, rounded और rounded-circle जैसी classes से responsive और attractive बनाया जा सकता है।

Bootstrap की सबसे बड़ी advantage यह है कि आपको हर element के लिए शुरुआत से CSS लिखने की जरूरत नहीं पड़ती। Ready-made Bootstrap classes का इस्तेमाल करके आप कम समय में responsive और professional website design कर सकते हैं।

अगर आप HTML और CSS के बाद Bootstrap 4 सीख रहे हैं, तो इन basic classes से शुरुआत करना सबसे अच्छा तरीका है। इसके बाद आप Bootstrap के Buttons, Cards, Navbar, Forms, Alerts, Modals और Responsive Utilities जैसे advanced components सीख सकते हैं।

Practice के लिए आप एक School Website, Business Website, Portfolio Website या E-commerce Website बनाकर इन सभी Bootstrap classes को practically इस्तेमाल कर सकते हैं। जितना ज्यादा आप real projects में इन classes को use करेंगे, उतनी ही जल्दी Bootstrap 4 पर आपकी command मजबूत होगी।