Bootstrap Snippet resposnive tabs-accordian tabs 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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<div class="container">
    <div class="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <div class="custom-tabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation"><a href="#home" aria-controls="home"
                    role="tab" data-toggle="tab"> Telinen per e-mail </a></li>
                <li role="presentation"><a href="#profile"
                    aria-controls="profile" role="tab" data-toggle="tab">Telinen
                        sie Einen link</a></li>
                <li role="presentation"><a href="#messages"
                    aria-controls="messages" role="tab" data-toggle="tab">auf
                        facebook Telinen </a></li>
                <li role="presentation" class="active"><a href="#settings"
                    aria-controls="settings" role="tab" data-toggle="tab">auf
                        Twitter Telinen</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content custom-tab-content">
                <div role="tabpanel" class="tab-pane" id="home">
                    <p>Home Tab Clicked</p>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="email" class="form-control"
                                        id="exampleInputEmail1"
                                        placeholder="http://taf.gurmondo.com/ECGDyGY">
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
.custom-tabs > .nav-tabs {
    border: none;
    margin: 0px;
}
  .nav-tabs li {
        margin-right: 2px;
      }
   .nav-tabs li.active{
            border:none;
            border-bottom: 2px solid #e5c16d;
            position: relative;
    }
            
    .nav-tabs li.active a{
                color: #333;
                font-weight: 700;
    }
   .nav-tabs li:hover{
            border-bottom: 2px solid rgba(229, 193, 109, 0.5);
            background:none;
     }
     
    .nav-tabs li:hover a{
               color: #333;
      }
        
    .nav-tabs li a{
            border: 0;
            margin-right: 0;
            font-family: Georgia;
            color:  #333;
            font-size: 14px;
            font-weight: 400; 
            text-align: left;
            text-transform:uppercase;
            cursor: pointer;
            padding:15px 15px 5px 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"resposnive tabs-accordian tabs"
Bootstrap 3.0.0 Snippet by nimesh049

Related: See More

Questions / Comments:

"resposnive tabs-accordian tabs" Bootstrap 3.0.0 Snippet by nimesh049

Related: See More

Questions / Comments:

"resposnive tabs-accordian tabs"
Bootstrap 3.0.0 Snippet by nimesh049