"Untitled"
Bootstrap 4.1.1 Snippet by RizwanAkram

Post to Facebook Tweet this

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 ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="fa-regular fa-pen-to-square mr-2"></i>Update Address</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore</p>
<div class="form-group">
<label>Country</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label>Code</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Address 1</label>
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
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css');
:root {
--primary: green;
--secondary: black;
--light: #f7f8f9;
--border-color: #f2f2f2;
--text-heading: #000;
--text-muted: #9499a1;
--font-base: 13px;
--strong: 600;
}
.btn-primary {
color: white;
border-color: var(--primary)!important;
background-color: var(--primary)!important;
}
.custom-control-label {font-weight: var(--strong);}
.custom-control-label::before,
.custom-control-label::after {
width: 15px;
height: 15px;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: white;
border-color: var(--primary)!important;
background-color: var(--primary)!important;
}
.custom-control-input:focus~.custom-control-label::before {box-shadow: none;}
html,body {
font-size: var(--font-base);
font-family: 'Poppins', sans-serif;
}
ul,ol {
padding: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard React

Questions / Comments: