Bootstrap Snippet Timely Card using HTML CSS Bootstrap Javascript

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 class="d-flex flex-row flex-wrap" >
    <div class="col-md-12"><br></div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><strong>Content Card</strong><a href="http://placeholder.com" class="action_header" target="_blank">Go Places</a></div>
            <div class="card-body">
                This is some content. Need a web developer? Why not Zoidberg? This filler content is some amazing stuff. Why not give it a try?
                <br>
                <button class="btn btn-square btn-info">Give it A try</button>
                <br>
                <img class="img-fluid" src="https://images.unsplash.com/photo-1533841175647-39fea57b86ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4b9139ac1d2962230f2840560117782b&auto=format&fit=crop&w=1500&q=80">
                <br>
                Asset Requirements For This CSS Package,
                
                <ul class="itemized">
                    <li>Bootstrap 4</li>
                    <li>clean.css</li>
                    <li>Intelligence</li>
                    <li>Twice Removed Bacon</li>
                </ul>
                
                <br>
            </div>
            
            <div class="card-footer">
                <button class="btn btn-success btn-block">Do Something</button>
            </div>
        </div>
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    
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/css?family=Montserrat');
.d-flex .col-md-4 {
    height: 100%;
}
.d-flex .flex-row {
    padding-top: 15px;
}
.card {
    border-radius: 0px;
    border:0px;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.25);
}
.card ul{
    list-style: none;
}
.card .action_header {
    position: absolute;
    top: 2.5%;
    right: 3%;
}
.card .card-footer .btn {
    margin: 0px;
}
.card .card-footer {
    padding:0px;    
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.25);
}
.card-header {
    background-color: transparent;
    border: 0px;
    font-family: 'Montserrat', sans-serif;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
class card_controller {
    constructor() {
        
    }
    start() {
        $('#close_card').on('click', this, function(e) {
            alert('Exiting Card');
        });
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Timely Card"
Bootstrap 4.1.1 Snippet by errorteam10

Related: See More

Questions / Comments:

"Timely Card" Bootstrap 4.1.1 Snippet by errorteam10

Related: See More

Questions / Comments:

"Timely Card"
Bootstrap 4.1.1 Snippet by errorteam10