Bootstrap Snippet Address 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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
       
        <div class="card bg-default mb-3">
    <div class="card-header thin-card-header">
        <div class="card-title">
            <ul class="card-toolbar">
                <li class="float-left">
                    <h4 style="font-family:Poppins, sans-serif"><i class="fa fa-map-marker"></i> Address</h4>
                </li>
                <li class="float-right">
                    <button type="button" class="btn btn-default" id="btnHelp"><span class="fa fa-question-circle"></span> </button>
                    <button type="button" class="btn btn-primary" id="btnAttachent"><span class="fa fa-paperclip"></span> Attachment </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <form class="form-horizontal" role="form">
            <div class="row">
                <div class="col-lg-6">
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label" for="textinput">Line 1</label>
                        <input type="text" placeholder="Address Line 1" class="form-control">
                    </div>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label" for="textinput">Line 2</label>
                        <input type="text" placeholder="Address Line 2" class="form-control">
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
ul.card-toolbar {
    margin: 0;
    padding: 0;
    display: block;
}
    ul.card-toolbar > li {
        float: left;
        display: list-item;
        list-style: none;
        margin: 0px;
        /*margin: 0 5px 10px 0;*/
    }
.btn-default {
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #dbdbdb;
    text-shadow: 0 1px 0 #fff;
    border-color: #ccc;
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.thin-card-header {
    padding: 0.5rem 1.25rem;
}
.card {
    border-radius: 0.5rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Address"
Bootstrap 4.0.0 Snippet by ssingh2020

Related: See More

Questions / Comments:

"Address" Bootstrap 4.0.0 Snippet by ssingh2020

Related: See More

Questions / Comments:

"Address"
Bootstrap 4.0.0 Snippet by ssingh2020