Bootstrap Snippet Bootstrap Material Design using HTML CSS Bootstrap jQuery

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <!--Main layout-->
    <main class="p-t-1">
        <div class="container text-xs-center">
            <h3>Material Design for Bootstrap 4 or 3</h3>
            <br>
            <p class="lead text-xs-center">This presentation shows a small part of components and features available in Material Design for Bootstrap. <strong>To see all of them have a look at our full demo.</strong></p>
            <br>
            <h4>Full demo & download</h4>
            <br>
            <!--First row-->
            <div class="row">
                <!--First column-->
                <div class="col-md-12">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight m-b-2">
                        <img src="http://mdbootstrap.com/images/about/intro.jpg" class="img-fluid">
                        <a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--Excerpt-->
                    <br>
                    <a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg"><i class="fa fa-download left"></i> Free download</a>
                </div>
                <!--/First column-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css);
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
// Adds some data to charts
$(function() {
    var data = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        datasets: [{
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }, {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }]
    };
    var option = {
        responsive: true,
        scaleFontSize: 10,
    };
    //Chart 1
    var ctx = document.getElementById("lineChartEx").getContext('2d');
    var lineChart = new Chart(ctx).Line(data, option);
    // Chart 2
    var ctx = document.getElementById("radarChartEx").getContext('2d');
    var radarChart = new Chart(ctx).Radar(data, option);
    // Chart 3
    var ctx = document.getElementById("barChartEx").getContext('2d');
    var barChart = new Chart(ctx).Bar(data, option);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Material Design"
Bootstrap 4.0.0 Snippet by thehtml5ninja

Related: See More

Questions / Comments:

"Bootstrap Material Design" Bootstrap 4.0.0 Snippet by thehtml5ninja

Related: See More

Questions / Comments:

"Bootstrap Material Design"
Bootstrap 4.0.0 Snippet by thehtml5ninja