Bootstrap Snippet Card Accordion Bootstrap 4 using HTML CSS Bootstrap

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!doctype html>
<htm>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,100,700,900,300" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="https://file.myfontastic.com/tJWvc9oygTjgZbPMueorGB/icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </head>
  <body>
        <section style="padding: 6em 0em; background-color: #ccc;">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <ul id="tabby-1" class="nav nav-pills nav-tabs nav-justified tabby-tabs" data-for="example-tab-content">
                    <li role="presentation"><a data-target="server" role="tab" data-default="true" data-tabbytoggle="tab" href="#">Server</a></li>
                    <li role="presentation"><a data-target="desktop" role="tab" data-default="true" data-tabbytoggle="tab" href="#">Desktop</a></li>
                    <li role="presentation"><a data-target="applications" role="tab" data-default="true" data-tabbytoggle="tab" href="#">Applications</a></li>
                    <li role="presentation"><a data-target="database" role="tab" data-default="true" data-tabbytoggle="tab" href="#">Database</a></li>
                    <li role="presentation"><a data-target="developer" role="tab" data-default="true" data-tabbytoggle="tab" href="#">Developer</a></li>
                </ul>
            </div><!--/.col-12-->
            <hr>
              <h4 class="cert">Windows Server Certifications</h4>
            <div id="accordion" role="tablist" aria-multiselectable="true">
                <div class="card accordion-panel">
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
body {
    font-family: 'Lato', sans-serif;
}
a {
    text-decoration: none!important;
}
.card {
    border-radius: 10px!important;
    border-bottom: 5px solid #eee!important;
}
.accordion-panel {
    text-align: center;
    display: block;
    text-decoration: none;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    box-shadow: none;
    border-radius: 10px;
}
.accordion-title  {
    text-transform: uppercase;
    font-weight: 100!important;
    padding: .75em!important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 0!important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Card Accordion Bootstrap 4"
Bootstrap 3.3.0 Snippet by sshelzi

Related: See More

Questions / Comments:

"Card Accordion Bootstrap 4" Bootstrap 3.3.0 Snippet by sshelzi

Related: See More

Questions / Comments:

"Card Accordion Bootstrap 4"
Bootstrap 3.3.0 Snippet by sshelzi