HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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 ---------->
<div id="mycard">
    
    <!-- Header -->
    <div id="mycard--header">
        <h1 id="title">
            Font<span id="title--bold-part">Selector<sup>3.0</sup></span>
        </h1>
    </div>
    
    <!-- Body -->
    <div id="mycard--body">
        
        <div class="row pb-3">
            <div class="col-sm-12">
                <form>
                    <div class="row">
                        <div class="col-sm-8">
                            <input type="text" id="user-text" class="form-control" placeholder="Type your text here...">
                        </div>
                        <div  id="user-select" class="col-sm-4">
                            <!-- Select -->
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="row pt-3">
            <div class="col-sm-12">
                <button type="button" class="btn btn-default mr-2" id="btn-love">
                    <i class="far fa-heart"></i> Love this font
                </button>
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
/********** Imports **********/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v16/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v16/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
/********** Variables **********/
/* Colors */
/********** Mixins **********/
/********** Init **********/
html,
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
/********** Card **********/
#mycard {
  display: block;
  width: 75%;
  overflow: hidden;
  border-radius: 10px;
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
$(document).ready(function() {
    // ------------------------------
    // Variables
    // ------------------------------
    
    var arrFonts = [
        'Bangers', 'Barriecito', 'Bentham', 'Bowlby One SC',
        
        'Cinzel Decorative', 'Courgette',
        
        'Fredericka the Great',
        
        'Julius Sans One',
        
        'La Belle Aurore', 'Lato', 'Lobster', 'Lora', 'Lusitana',
        
        'Niconne', 'Nixie One',
        
        'Open Sans',
        
        'Pacifico',
        
        'Raleway', 'Roboto',
        
        'Ubuntu'
    ];
    
    var loadFonts = ['Open Sans'];
    // ------------------------------
    // Set select
    // ------------------------------
    
    var select = '<select id="user-font" class="form-control">';
        for(var i = 0; i < arrFonts.length; i++) {
            select += '<option value="' + arrFonts[i] + '"';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"FontSelector 3.0 - Find the best font"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"FontSelector 3.0 - Find the best font" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"FontSelector 3.0 - Find the best font"
Bootstrap 4.1.1 Snippet by koshikojha