Bootstrap Snippet Bootstrap column gap using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--col gap 40px -->
<div class="mb-20 text-center"><h3>Space between columns 50px</h3></div>
    <div class="container col-gap-50">
        <div class="row text-center">
            <div class="col-md-4">
                <div class="wrap">
                    <h2>Hallo wereld.</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                    <a href="#">Button</a>
                    
                </div>
            </div>
            <div class="col-md-4">
                <div class="wrap">
                    <h2>Hallo wereld.</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                    <a href="#">Button</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="wrap">
                    <h2>Hallo wereld.</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                    <a href="#">Button</a>
                </div>
            </div>
            
        </div>
    </div>
<!--col gap 10px -->
   <div class="mb-20 text-center"><h3>Space between columns 10px</h3></div> 
    <div class="container col-gap-10 ">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*#######################  gap css ####################*/
    /*col gap 5px */
    .col-gap-5.container div[class*="col"] { padding-left: 2.5px !important; padding-right: 2.5px !important; }
    .col-gap-5.container > .row { margin-left: -17.px !important; margin-right: -17.5px !important; }
    /*col gap 10px */
    .col-gap-10.container div[class*="col"] { padding-left: 5px !important; padding-right: 5px !important; }
    .col-gap-10.container > .row { margin-left: -20px !important; margin-right: -20px !important; }
    /*col gap 15px */
    .col-gap-15.container div[class*="col"] { padding-left: 7.5px !important; padding-right: 7.5px !important; } 
    .col-gap-15.container > .row { margin-left: -22.5px !important; margin-right: -22.5px !important; }
    /*col gap 20px */
    .col-gap-20.container div[class*="col"] { padding-left: 10px !important; padding-right: 10px !important; } 
    .col-gap-20.container > .row { margin-left: -25px !important; margin-right: -25px !important; } 
    /*col gap 25px */ .col-gap-25.container div[class*="col"] { padding-left: 12.5px !important; padding-right: 12.5px !important; } 
    .col-gap-25.container > .row { margin-left: -27.5px !important; margin-right: -27.5px !important; } 
    /*col gap 30px */ 
    .col-gap-30.container div[class*="col"] { padding-left: 15px !important; padding-right: 15px !important; } 
    .col-gap-30.container > .row { margin-left: -30px !important; margin-right: -30px !important; } 
    /*col gap 35px */ 
    .col-gap-35.container div[class*="col"] { padding-left: 17.5px !important; padding-right: 17.5px !important; } 
    .col-gap-35.container > .row { margin-left: -32.5px !important; margin-right: -32.5px !important; } 
    /*col gap 40px */ 
    .col-gap-40.container div[class*="col"] { padding-left: 20px !important; padding-right: 20px !important; } 
    .col-gap-40.container > .row { margin-left: -35px !important; margin-right: -35px !important; } 
    /*col gap 45px */ 
    .col-gap-45.container div[class*="col"]{ padding-left: 22.5px !important; padding-right: 22.5px !important; } 
    .col-gap-45.container > .row { margin-left: -37.5px !important; margin-right: -37.5px !important; } 
    /*col gap 50px */ 
    .col-gap-50.container div[class*="col"]{ padding-left: 25px !important; padding-right: 25px !important; } 
    .col-gap-50.container > .row { margin-left: -40px !important; margin-right: -40px !important; } 
    /*col gap 60px */ 
    .col-gap-60.container div[class*="col"]{ padding-left: 30px !important; padding-right: 30px !important; } 
    .col-gap-60.container > .row { margin-left: -45px !important; margin-right: -45px !important; } 
    /*col gap 70px */ 
    .col-gap-70.container div[class*="col"]{ padding-left: 35px !important; padding-right: 35px !important; } 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap column gap"
Bootstrap 4.1.1 Snippet by Tauhidpro

Related: See More

Questions / Comments:

"Bootstrap column gap" Bootstrap 4.1.1 Snippet by Tauhidpro

Related: See More

Questions / Comments:

"Bootstrap column gap"
Bootstrap 4.1.1 Snippet by Tauhidpro