Bootstrap Snippet Vertical tabs using HTML CSS

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 ---------->
<!doctype html>
<html lang="pt-br">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
  <meta http-eqiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <title>VERTICAL TABS</title>
</head>
<body>
  <h1 class="text-center titulo">VERTICAL TABS</h1>
  <div class="container">
    <div class="vertical-tabs">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#pag1" role="tab" aria-controls="home">Página 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#pag2" role="tab" aria-controls="profile">Página 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#pag3" role="tab" aria-controls="messages">Página 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#pag4" role="tab" aria-controls="settings">Página 4</a>
        </li>
        <li class="nav-item">
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 {background:#7cbac1; margin: 0;}
/* Vertical Tabs */
 .vertical-tabs{
    font-size:15px;
    padding:10px;
    color:#000
}
 .vertical-tabs .nav-tabs .nav-link{
    border-radius: 0;
    background:#c10101;
    text-align:center;
    font-size: 16px;
    border:1px solid #424242;
    color:#fff;
    height:40px;
    width: 120px;
}
 .vertical-tabs .nav-tabs .nav-link.active{
    background-color:#700000!important;
    color:#fff;
}
 .vertical-tabs .tab-content>.active{
    background:#fff;
    display:block;
}
 .vertical-tabs .nav.nav-tabs{
    border-bottom:0;
    border-right:3px solid #000;
    display:block;
    float:left;
    margin-right:20px;
    padding-right:15px;
}
 .vertical-tabs .sv-tab-panel{
    background:#fff;
    height:274px;
    padding-top:10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Vertical tabs"
Bootstrap 4.1.1 Snippet by erickkf600

Related: See More

Questions / Comments:

"Vertical tabs" Bootstrap 4.1.1 Snippet by erickkf600

Related: See More

Questions / Comments:

"Vertical tabs"
Bootstrap 4.1.1 Snippet by erickkf600