forked from ThemesGuide/bootstrap-themes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
how-to-use-bootstrap-css.html
633 lines (532 loc) · 32.7 KB
/
how-to-use-bootstrap-css.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to use Bootstrap CSS</title>
<link meta="description" content="Learn the basics of Bootstap and how to use Bootstap CSS components">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta property="og:image" name="twitter:image" content="http://themes.guide/favicon-1024.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ThemesGuide">
<meta name="twitter:creator" content="@ThemesGuide">
<meta name="twitter:title" content="How to use Bootstrap CSS">
<meta name="twitter:description" content="Learn the basics of Bootstap and how to use Bootstap CSS components">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103606808-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://www.codeply.com/js/embed.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
<nav class="navbar navbar-custom navbar-dark fixed-top navbar-expand-md" role="navigation">
<div class="container">
<a class="navbar-text page-scroll font-weight-bold text-uppercase py-3" href="http://themes.guide">
<span>Themes.guide</span>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-md-auto">
<li class="nav-item"><a class="page-scroll active nav-link pr-3" href="./">Bootstrap 4</a></li>
<li class="nav-item"><a class="page-scroll nav-link pr-3" target="_ext" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
<li class="nav-item"><a class="page-scroll nav-link pr-3" title="Bootstrap 4 themes collection" href="http://themes.guide/#freebies">Free Themes</a></li>
<li class="nav-item"><a class="page-scroll nav-link pr-0" href="http://themes.guide/#themes">Pro Themes</a></li>
</ul>
</div>
</div>
</nav>
<div class="container pt-5">
<div class="row mt-5">
<div class="col-md-12">
<h4>
<a href="how-to.html">
<img src="./assets/howto/bootstrap-punchout.svg" alt="How to Bootstrap 4" class="bg-primary border rounded border-primary mr-2 mb-1" style="width:30px;height:30px">
How to... Bootstrap</a>
</h4>
</div>
<div class="col-md-12 pt-5 text-center">
<h1 class="font-weight-light">How to Use Bootstrap CSS</h1>
<h4>Content, Styles and Components</h4>
</div>
</div>
</div>
<section id="howto">
<div class="container">
<div class="row mb-3">
<div class="col-sm-10 mx-auto">
<p class="lead">
<strong>The CSS is the most essential part of Bootstrap.</strong> The Bootstrap CSS can be used alone, without the Bootstrap
JavaScript components. <em>Generally</em> speaking, Bootstrap’s CSS provides two things…</p>
<ul class="list-unstyled mt-2">
<li>
<h4>1. Element Styles</h4>
<p class="lead">Buttons, fonts, colors, badges, typography, progress bars, alerts, etc…</p>
</li>
<li>
<h4>2. The Bootstrap Grid</h4>
<p class="lead">Layout helpers using “rows” and “columns”.</p>
</li>
</ul>
<hr class="border-dark my-5">
<p class="lead">
First, I’ll explore all of the element styles Bootstrap provides to “make Web development faster and easier”.
Remember that simple Bootstrap example I <a href="reasons-to-use-bootstrap.html">showed earlier</a>?</p>
<div class="card w-75 my-5 mx-auto">
<div class="card-block bg-white">
<div data-codeply="RMPQJ3AqJn" data-codeply-height="200px"></div>
</div>
</div>
<p class="lead">Let’s understand what Bootstrap <em>really</em> does to the Web page...</p>
<hr class="my-5">
<h2 class="mt-4">Reboot</h2>
<p class="lead">
First of all, the Bootstrap CSS includes Reboot which “normalizes” the Web page styles. Web browsers have different, somewhat ugly,
styles that are applied to Web pages by default.</p>
<p class="lead">
Since each browser’s defaults are a little different, Bootstrap uses Reboot to override the browser defaults, and provide the same
“elegant, consistent baseline” to build upon, regardless of the browser.</p>
<p class="lead">
This means that if the Web page is viewed on Safari, Chrome, Firefox or IE it will start out with the same baseline CSS styles.</p>
<hr class="my-5">
<h2 class="mt-4">Fonts (Typeface)</h2>
<p class="lead">Text readability and scale are an important consideration in Web design. Bootstrap took this into consideration
when selecting the native font stack for Bootstrap 4:</p>
<pre class="bg-dark text-white rounded">
<code>
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
The Bootstrap CSS makes the text look like this…
</code>
</pre>
<p class="lead">Bootstrap's font stack (included in the CSS) makes the text look like this…</p>
<img src="./assets/howto/fonts.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Fonts">
<hr class="my-5">
<h2 class="mt-4">Colors</h2>
<p class="lead">
No one gets too excited about a Web page that lacks color. Color is often used to convey meaning, and highlight
specific page content. Bootstrap provides 8 contextual colors that can be easily applied to HTML elements. You’ll see that
colors are named to convey meaning.
</p>
<img src="./assets/howto/colors.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Contextual Colors">
<p class="lead">
Additionally, Bootstrap CSS can be used to style and format any page content such as Tables, Forms, Images and Figures.
</p>
<hr class="my-5">
<h2 class="mt-4">Components</h2>
<p class="lead">
Take a quick glance at the following examples of the Bootstrap Components. These are just some
the “things” that can be easily “plugged-in” to your Web pages when using Bootstrap…
</p>
<img src="./assets/howto/alert.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Alerts">
<img src="./assets/howto/badges.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Badges">
<img src="./assets/howto/bread.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Breadcrumbs">
<img src="./assets/howto/buttons.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Buttons">
<img src="./assets/howto/cards.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Cards">
<img src="./assets/howto/collapse.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Collapse">
<img src="./assets/howto/dropdown.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Dropdown">
<img src="./assets/howto/inputgroup.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Forms">
<img src="./assets/howto/modals.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 Modal">
<img src="./assets/howto/navbar.png" class="d-block img-fluid mx-auto my-4" alt="Bootstrap 4 NavBar">
<hr class="my-5 border-dark">
<h2 class="mt-4">How to <em>Use</em> Bootstrap CSS “Styles”</h2>
<p class="lead">
Using any of these Bootstrap Components is very easy. It’s just a matter of referencing the appropriate Bootstrap
CSS class in the HTML markup. For example, here’s how we use Bootstrap’s primary colored button on a Web page…
</p>
<pre class="bg-dark text-white rounded">
<code>
<button type="button" class="btn btn-primary">Primary</button>
</code>
</pre>
<p class="lead">
So, the buttons’ style comes from the CSS “rules” for the <code>.btn</code> and <code>.btn-primary</code> CSS selectors. Here are the relevant rules in the Bootstrap CSS…
</p>
<pre class="bg-dark text-white rounded">
<code>
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
</code>
</pre>
<p class="lead">
You might be wondering…
</p>
<h4 class="mt-5">Why does the button have 2 classes: <code>.btn</code> + <code>.btn-primary</code>?</h4>
<p class="lead">
“Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the
styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger).”
This base-modifier approach in Bootstrap’s CSS makes customizing Bootstrap much easier which I will explain
<a href="how-to-customize-bootstrap.html">later in this article</a>.
</p>
<h5 class="mt-5">
Here's an overview of the relationship between the HTML markup and the Bootstrap CSS:
</h5>
<img src="./assets/howto/css_html.png" class="d-block img-fluid mx-auto my-4" alt="CSS HTML and the Web page">
<p class="lead">
As you can see in the picture above, the “Primary” button has a different color than the normal Bootstrap blue color.
That’s because this Web page also includes a “theme.css” stylesheet after the “bootstrap.min.css”.</p>
<p class="lead">
The CSS styles (or rules) defined in “theme.css” are overriding the default Bootstrap CSS styles, such as the
definition of the <code>.btn-primary</code> color. I will explain <a href="how-to-customize-bootstrap.html">Bootstrap theming and
customization</a> later in this article.
</p>
<hr class="my-5 border-dark">
<h5>
Let’s look at more examples of Bootstrap Component <em>usage</em>...
</h5>
<div class="card my-5 mx-auto">
<div class="card-block bg-white">
<div data-codeply="Tb6vzh4yPY" data-codeply-height="1300px"></div>
</div>
</div>
<p class="lead">Badges</p>
<pre class="bg-dark text-white rounded">
<code>
<span class="badge badge-primary">Badge</span>
<span class="badge badge-pill badge-primary">Rounded Badge</span>
</code></pre>
<p class="lead">Breadcrumbs</p>
<pre class="bg-dark text-white rounded">
<code>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Breadcrumb</li>
</ol>
</nav>
</code></pre>
<p class="lead">Buttons</p>
<pre class="bg-dark text-white rounded">
<code>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
</code></pre>
<p class="lead">Cards</p>
<pre class="bg-dark text-white rounded">
<code>
<div class="card">
<div class="card-body d-flex flex-column align-items-start">
<h4 class="card-title text-primary">Card Outline</h4>
<p class="card-text">With supporting text.</p>
<a href="#" class="btn btn-primary mt-auto">Button</a>
</div>
</div>
</code></pre>
<p class="lead">Forms & Inputs</p>
<pre class="bg-dark text-white rounded">
<code>
<form role="form">
<div class="form-group row">
<label class="col-md-2 col-form-label form-control-label">
First
</label>
<div class="col-md-4">
<input class="form-control" type="text" value="Jane">
</div>
<label class="col-md-1 col-form-label form-control-label">
Last
</label>
<div class="col-md-5">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label form-control-label">
Address
</label>
<div class="col-lg-10">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<div class="col-lg-12 text-right">
<input type="button" class="btn btn-primary" value="Submit">
</div>
</div>
</form>
</code></pre>
<p class="lead">Jumbotron</p>
<pre class="bg-dark text-white rounded">
<code>
<div class="jumbotron py-4">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">
This is simple jumbotron component...
</p>
</div>
</code></pre>
<p class="lead">Pagination</p>
<pre class="bg-dark text-white rounded">
<code>
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
</code></pre>
<p class="lead">Progress</p>
<pre class="bg-dark text-white rounded">
<code>
<div class="progress">
<div class="progress-bar w-25">
</div>
</div>
</code></pre>
<hr class="my-5">
<h4>What's the correct HTML markup & structure to use?</h4>
<p class="lead">This is where developing with Bootstrap does require some “leg work”. You do need to know and use
the correct HTML structure when utilizing any of the Bootstrap Components.</p>
<p class="lead">When using Components like the Button (.btn .btn-primary) shown earlier, the HTML markup is straight-forward.
But, for other Components like the <a href="http://getbootstrap.com/docs/4.1/components/navbar/">Navbar</a>,
<a href="http://getbootstrap.com/docs/4.1/components/modal/">Modal</a> or <a href="http://getbootstrap.com/docs/4.1/components/carousel/">Carousel</a>,
determining the correct HTML structure is more complex,
and will vary according to use-case and the desired implementation.</p>
<p class="lead">When using these more complex Bootstrap Components, you must start with examples. The best resource is the
<a href="http://getbootstrap.com">Official Bootstrap Documentation</a>. The docs have many examples, and a “How it Works” section for each Component.</p>
<p class="lead">There are also tools like <a href="http://www.codeply.com">Codeply</a> (that’s the one I wrote), and
<a href="http://bootstrap.build">Bootstrap.build</a> that include example
Bootstrap code snippets that you can easily drop in an editor and play around with. For example, here’s the Navbar picked
from the Codeply’s Bootstrap 4 Components list…</p>
<img src="./assets/howto/codeply.png" class="d-block img-fluid mx-auto my-4" alt="Find Bootstrap 4 element stucture on Codeply">
<hr class="my-5 border-dark">
<h3>The Navbar</h3>
<p class="lead">
While most of the Bootstrap Components shown above are self-explanatory, I think the Navbar requires a full explanation.
Along with the Grid, the Navbar is one of the most popular Bootstrap Components.</p>
<h5>Content, Structure and Alignment</h5>
<p class="lead"><em>Only</em> use supported content inside the Navbar. The Navbar can contain:</p>
<ul>
<li>Logo/brand</li>
<li>Nav links, buttons, or dropdowns</li>
<li>Inline forms</li>
<li>Text</li>
</ul>
<p class="lead">
Don’t use Grid Rows/Columns inside the Navbar. There’s really no reason to since Utility classes can be used to align Navbar
content. For example, here the <code>ml-auto</code> (left auto margin) class is used to align the 2nd Nav to the right:</p>
<pre class="bg-dark text-white rounded">
<code>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler"
data-toggle="collapse"
data-target="#nb">
<span class="navbar-toggler-icon"></span>
</button>
<div id="nb" class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Left aligned</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right aligned</a>
</li>
</ul>
</div>
</nav>
</code></pre>
<h5>Navbar Breakpoints</h5>
<p class="lead">
By default, the Navbar is designed for smaller screen widths on Mobile devices. Therefore the Navbar will stack vertically in a column,
unless overridden with a “expand” class make the Navbar to remain horizontal above specified breakpoint widths. There are 5 breakpoints…
</p>
<ul class="my-4">
<li><code>navbar-expand</code> = always expanded (remains horizontal)</li>
<li><code>navbar-expand-sm</code> = expands on sm widths > 576px</li>
<li><code>navbar-expand-md</code> = expands on md widths > 768px</li>
<li><code>navbar-expand-lg</code> = expands on lg widths > 992px</li>
<li><code>navbar-expand-xl</code> = expands on xl widths > 1200px</li>
</ul>
<a class="d-block my-3" href="http://www.codeply.com/go/imngr08QRi" target="_new" title="See the different Navbar breakpoints">Try it on Codeply</a>
<h5>Light or Dark Background Color?</h5>
<p class="lead">
The Navbar uses the navbar-light and navbar-dark classes to determine the foreground colors of the brand,
links and toggler (hamburger) icon. Make sure you use the appropriate classes to make the Navbar content display.</p>
<ul class="my-4">
<li>Use <code>navbar-dark</code> to for darker colored backgrounds</li>
<li>Use <code>navbar-light</code> to for lighter colored backgrounds</li>
</ul>
<p class="lead">
To give the Navbar a background color, use one of the contextual colors (e.g. bg-primary) otherwise
the Navbar is transparent.</p>
<h5 class="text-right"><a href="https://medium.com/wdstack/bootstrap-4-custom-navbar-1f6a2da5ed3c" target="_new">Read more about the Bootstrap 4 Navbar</a></h5>
<hr class="my-5 border-dark">
<h3>Utility Classes</h3>
<p class="lead">
Of course, Bootstrap is the Swiss army knife of the Web design & development world. Bootstrap encompasses many widely
used CSS properties in <a href="http://getbootstrap.com/docs/4.1/utilities" target="_new">handy Utility classes</a>. This eliminates the need to write the same CSS over-and-over again to apply styles to different HTML elements.
You many know it as <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_new">D.R.Y.</a>
</p>
<p class="lead">
So instead of writing this…
</p>
<pre class="bg-dark text-white rounded my-3">
<code>
<style>#mydiv { text-alignment: center }</style>
<div id="mydiv" class="text-center">Centered text</div>
</code></pre>
<p class="lead">
You simply utilize Bootstrap’s <code>text-center</code> alignment class wherever it’s needed…
</p>
<pre class="bg-dark text-white rounded my-3">
<code>
<div id="mydiv" class="text-center">Centered text</div>
</code></pre>
<hr class="my-5">
<p class="lead">Remember, the most up-to-date Bootstrap resource is the
<a href="http://getbootstrap.com">Official Bootstrap Documentation</a>.
The docs have many examples, and a “How it Works” section for each Component.</p>
<h3>
Now that you understand the basics of using Bootstrap’s styling Components, next I will explain Bootstrap’s powerful,
responsive Layout Component__ the Grid System.
</h3>
</div>
<div class="col-sm-10 mx-auto mt-5 py-4 border-top">
<div class="row">
<div class="col-sm mr-auto">
<a href="bootstrap-getting-started.html">Prev: How to Get Started with Bootstrap</a>
</div>
<div class="col-sm-auto text-right">
<a href="how-to-use-bootstrap-grid.html">Next: How to Use the Bootstrap Grid</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="modalContact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-block">
<h3 class="text-center">How can we help you?</h3>
</div>
<div class="modal-body">
<form id="contactForm" role="form" method="post">
<div class="form-group">
<label for="inputEmail" class="col-md-2 form-control-label">Email</label>
<div class="col-md-12">
<input type="email" class="form-control" id="inputEmail" name="contactEmail" required="">
</div>
</div>
<div class="form-group">
<label for="inputMessage" class="col-md-2 form-control-label">Message</label>
<div class="col-md-12">
<textarea class="form-control" id="inputMessage" rows="6" name="contactMessage"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xl-12">
<button type="submit" id="contactBtn" class="btn btn-primary btn-lg mx-auto">Send it</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalThanks" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-block text-center">
<h3>Thank you!</h3>
<h6>We'll be in touch</h6>
</div>
</div>
</div>
</div>
<footer id="footer" class="bg-dark text-white">
<div class="container pt-3">
<div class="row">
<div class="col-6 col-md-6 col-lg-3 column">
<h6>Information</h6>
<ul class="list-unstyled">
<li><a href="http://themes.guide/#freebies">Free Themes</a>
</li>
<li><a href="http://themes.guide/#themes">Pro Themes</a>
</li>
<li><a href="http://themes.guide/#about">Benefits</a>
</li>
</ul>
</div>
<div class="col-6 col-lg-3 column text-lg-left text-right">
<h6>Tools</h6>
<ul class="list-unstyled">
<li><a href="https://themestr.app" title="Custom Bootstrap theme creator - SASS to CSS">Themestr.app</a>
</li>
<li><a href="http://bootstrap4.guide" title="Learn about Bootstrap 4">Bootstrap4.guide</a>
</li>
<li><a href="http://www.codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a>
</li>
</ul>
</div>
<div class="col-6 col-lg-3 column">
<h6></h6>
</div>
<div class="col-6 col-lg-3 column text-right">
<h6>Follow</h6>
<ul class="nav float-right">
<li><a class="nav-link px-1" href="//twitter.com/ThemesGuide" title="@ThemesGuide"><i class="fa fa-3x ion-logo-twitter"></i></a></li>
<li><a class="nav-link px-1" href="https://github.com/ThemesGuide/bootstrap-themes" title="Star on GitHub"><i class="fa fa-3x ion-ios-star-outline"></i></a></li>
<li><a class="nav-link pl-1 pr-0" href="https://github.com/ThemesGuide" title="Follow on GitHub"><i class="fa fa-3x ion-logo-github"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container pt-5">
<p class="small text-right">Made with ♥ by <a class="text-white" href="http://themes.guide">Themes.guide</a> ©2018</p>
</div>
</footer>
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
</body>
</html>