Example : Various ways to set Margin & Padding in a webpage in Bootstrap4.

Margin & Padding in Bootstrap4

<!DOCTYPE html>
<html lang="en">
  
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>A typical Bootstrap Form Template</title>

        <!-- Bootstrap CSS 4.5.2 -->
        
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> -->
        
        <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        />
       
    </head>

    <body>
        <section>
            <div class="container text-center">
                <!-- <h1>Various Form of Tables in a Form in Bootstrap</h1> -->
            </div>
        </section>
       
        <section>
            <div class="container my-4">
                <div class="card">
                    
                    <div class="card-header text-center">
                        <h2 style="color:green">Various Margin & Padding Spacing in Bootstrap4</h2>
                    </div>

                    <div class="card-body">
                        <form action="" method="post" name="form1" id="form2" enctype="multipart/form-data">                            
                                
                            <!-- 
                                Here:

                                    m - to set margin in paragraph/div class etc.
                                    p - to set padding in paragraph/div class etc.

                                The sides of margin and padding are denoted by:

                                    t - to set margin-top or padding-top.
                                    b - to set margin-bottom or padding-bottom.
                                    l - to set margin-left or padding-left.
                                    r - to set margin-right or padding-right.
                                    x - to set both margin or padding left and right.
                                    y - to set both margin or padding top and bottom.
                                    blank [only m or p] - to set a margin or padding on all 4 sides(top, right, bottom, left) of the element.
                                
                                The size may be used for margin or padding are:

                                    0 - to eliminate the margin or padding from setting, if any, to 0.
                                    1 - (by default) to set the margin or padding to [$spacer *] .25
                                    2 - (by default) to set the margin or padding to [$spacer *] .5
                                    3 - (by default) to set the margin or padding to [$spacer] 1.0
                                    4 - (by default) to set the margin or padding to [$spacer *] 1.5
                                    5 - (by default) to set the margin or padding to [$spacer *] 3 [Highest size]
                                    auto - for classes that set the margin only to auto

                                For example

                                    mb-2 = To set margin (size 2 or 0.5)from bottom side.
                                    my-2 = To set margin (size 2 or 0.5)from top & bottom side.
                                    mt-n2 = To set negative margin (negative size -2 or -0.5)from top side.

                                    pt-3 = To set padding (size 3 or 1.0)from top side.
                                    px-3 = To set padding (size 3 or 1.0)from left & right side.
                                    px-n3 = To set negative padding (negative size -3 or -1.0)from left & right side.

                                    p-4 = To set padding (size 4 or 1.5)from all sides i.e. top, right, bottom, left.
                                    m-2 = To set margin (size 4 or 1.5)from all sides i.e. top, right, bottom, left.
                                    m-n2 = To set negative margin (negative size -4 or -1.5)from all sides i.e. top, right, bottom, left.

                            -->

                            </br>

                            <div class="p-3 mb-0 bg-info text-white">
                                Info Background-Color with White text in Bootstrap4
                            </div>
                            
                            <div class="bg-primary p-3 mb-1 text-white">
                                Primary Background-Color with White text in Bootstrap4
                            </div>                            

                            <div class="m-5 mb-2 bg-secondary text-white">
                                Secondary Background-Color with White text in Bootstrap4
                            </div>                            

                            <div class="bg-success text-white p-3 mb-3">
                                Success Background-Color with White text in Bootstrap4
                            </div>                            

                            <div class="p-3 mb-4 bg-danger text-white">
                                Danger Background-Color with White text in Bootstrap4
                            </div>                            

                            <div class="p-3 mb-5 bg-warning text-white">
                                Warning Background-Color with White text in Bootstrap4
                            </div>

                        </form>
                    </div>

                    <div class="card-footer text-center">
                        Copyright 2020
                    </div>

                </div>
            </div>
        </section>
            
        <!-- Bootstrap JS, Popper.js, and jQuery -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->

    </body>
</html>

 602 total views,  131 views today

Categories: Bootstrap

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.