Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<div class="container">
2 <div class="page-header">
3 <h1>Panels with nav tabs</h1>
4 </div>
5 <div class="row">
6 <div class="col-md-6">
7 <div class="panel with-nav-tabs panel-default">
8 <div class="panel-heading">
9 <ul class="nav nav-tabs">
10 <li class="active"><a href="#tab1default" data-bs-toggle="tab">Default 1</a></li>
11 <li><a href="#tab2default" data-bs-toggle="tab">Default 2</a></li>
12 <li><a href="#tab3default" data-bs-toggle="tab">Default 3</a></li>
13 <li class="dropdown">
14 <a href="#" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></a>
15 <ul class="dropdown-menu" role="menu">
16 <li><a href="#tab4default" data-bs-toggle="tab">Default 4</a></li>
17 <li><a href="#tab5default" data-bs-toggle="tab">Default 5</a></li>
18 </ul>
19 </li>
20 </ul>
21 </div>
22 <div class="panel-body">
23 <div class="tab-content">
24 <div class="tab-pane fade in active" id="tab1default">Default 1</div>
25 <div class="tab-pane fade" id="tab2default">Default 2</div>
26 <div class="tab-pane fade" id="tab3default">Default 3</div>
27 <div class="tab-pane fade" id="tab4default">Default 4</div>
28 <div class="tab-pane fade" id="tab5default">Default 5</div>
29 </div>
30 </div>
31 </div>
32 </div>
33 <div class="col-md-6">
34 <div class="panel with-nav-tabs panel-primary">
35 <div class="panel-heading">
36 <ul class="nav nav-tabs">
37 <li class="active"><a href="#tab1primary" data-bs-toggle="tab">Primary 1</a></li>
38 <li><a href="#tab2primary" data-bs-toggle="tab">Primary 2</a></li>
39 <li><a href="#tab3primary" data-bs-toggle="tab">Primary 3</a></li>
40 <li class="dropdown">
41 <a href="#" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></a>
42 <ul class="dropdown-menu" role="menu">
43 <li><a href="#tab4primary" data-bs-toggle="tab">Primary 4</a></li>
44 <li><a href="#tab5primary" data-bs-toggle="tab">Primary 5</a></li>
45 </ul>
46 </li>
47 </ul>
48 </div>
49 <div class="panel-body">
50 <div class="tab-content">
51 <div class="tab-pane fade in active" id="tab1primary">Primary 1</div>
52 <div class="tab-pane fade" id="tab2primary">Primary 2</div>
53 <div class="tab-pane fade" id="tab3primary">Primary 3</div>
54 <div class="tab-pane fade" id="tab4primary">Primary 4</div>
55 <div class="tab-pane fade" id="tab5primary">Primary 5</div>
56 </div>
57 </div>
58 </div>
59 </div>
60 </div>
61</div>
62<div class="container">
63 <div class="row">
64 <div class="col-md-6">
65 <div class="panel with-nav-tabs panel-success">
66 <div class="panel-heading">
67 <ul class="nav nav-tabs">
68 <li class="active"><a href="#tab1success" data-bs-toggle="tab">Success 1</a></li>
69 <li><a href="#tab2success" data-bs-toggle="tab">Success 2</a></li>
70 <li><a href="#tab3success" data-bs-toggle="tab">Success 3</a></li>
71 <li class="dropdown">
72 <a href="#" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></a>
73 <ul class="dropdown-menu" role="menu">
74 <li><a href="#tab4success" data-bs-toggle="tab">Success 4</a></li>
75 <li><a href="#tab5success" data-bs-toggle="tab">Success 5</a></li>
76 </ul>
77 </li>
78 </ul>
79 </div>
80 <div class="panel-body">
81 <div class="tab-content">
82 <div class="tab-pane fade in active" id="tab1success">Success 1</div>
83 <div class="tab-pane fade" id="tab2success">Success 2</div>
84 <div class="tab-pane fade" id="tab3success">Success 3</div>
85 <div class="tab-pane fade" id="tab4success">Success 4</div>
86 <div class="tab-pane fade" id="tab5success">Success 5</div>
87 </div>
88 </div>
89 </div>
90 </div>
91 <div class="col-md-6">
92 <div class="panel with-nav-tabs panel-info">
93 <div class="panel-heading">
94 <ul class="nav nav-tabs">
95 <li class="active"><a href="#tab1info" data-bs-toggle="tab">Info 1</a></li>
96 <li><a href="#tab2info" data-bs-toggle="tab">Info 2</a></li>
97 <li><a href="#tab3info" data-bs-toggle="tab">Info 3</a></li>
98 <li class="dropdown">
99 <a href="#" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></a>
100 <ul class="dropdown-menu" role="menu">
101 <li><a href="#tab4info" data-bs-toggle="tab">Info 4</a></li>
102 <li><a href="#tab5info" data-bs-toggle="tab">Info 5</a></li>
103 </ul>
104 </li>
105 </ul>
106 </div>
107 <div class="panel-body">
108 <div class="tab-content">
109 <div class="tab-pane fade in active" id="tab1info">Info 1</div>
110 <div class="tab-pane fade" id="tab2info">Info 2</div>
111 <div class="tab-pane fade" id="tab3info">Info 3</div>
112 <div class="tab-pane fade" id="tab4info">Info 4</div>
113 <div class="tab-pane fade" id="tab5info">Info 5</div>
114 </div>
115 </div>
116 </div>
117 </div>
118 </div>
119</div>
120<div class="container">
121 <div class="row">
122 <div class="col-md-6">
123 <div class="panel with-nav-tabs panel-warning">
124 <div class="panel-heading">
125 <ul class="nav nav-tabs">
126 <li class="active"><a href="#tab1warning" data-bs-toggle="tab">Warning 1</a></li>
127 <li><a href="#tab2warning" data-bs-toggle="tab">Warning 2</a></li>
128 <li><a href="#tab3warning" data-bs-toggle="tab">Warning 3</a></li>
129 <li class="dropdown">
130 <a href="#" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></a>
131 <ul class="dropdown-menu" role="menu">
132 <li><a href="#tab4warning" data-bs-toggle="tab">Warning 4</a></li>
133 <li><a href="#tab5warning" data-bs-toggle="tab">Warning 5</a></li>
134 </ul>
135 </li>
136 </ul>
137 </div>
138 <div class="panel-body">
139 <div class="tab-content">
140 <div class="tab-pane fade in active" id="tab1warning">Warning 1</div>
141 <div class="tab-pane fade" id="tab2warning">Warning 2</div>
142 <div class="tab-pane fade" id="tab3warning">Warning 3</div>
143 <div class="tab-pane fade" id="tab4warning">Warning 4</div>
144 <div class="tab-pane fade" id="tab5warning">Warning 5</div>
145 </div>
146 </div>
147 </div>
148 </div>
149 <div class="col-md-6">
150 <div class="panel with-nav-tabs panel-danger">
151 <div class="panel-heading">
152 <ul class="nav nav-tabs">
153 <li class="active"><a href="#tab1danger" data-bs-toggle="tab">Danger 1</a></li>
154 <li><a href="#tab2danger" data-bs-toggle="tab">Danger 2</a></li>
155 <li><a href="#tab3danger" data-bs-toggle="tab">Danger 3</a></li>
156 <li class="dropdown">
157 <a href="#" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></a>
158 <ul class="dropdown-menu" role="menu">
159 <li><a href="#tab4danger" data-bs-toggle="tab">Danger 4</a></li>
160 <li><a href="#tab5danger" data-bs-toggle="tab">Danger 5</a></li>
161 </ul>
162 </li>
163 </ul>
164 </div>
165 <div class="panel-body">
166 <div class="tab-content">
167 <div class="tab-pane fade in active" id="tab1danger">Danger 1</div>
168 <div class="tab-pane fade" id="tab2danger">Danger 2</div>
169 <div class="tab-pane fade" id="tab3danger">Danger 3</div>
170 <div class="tab-pane fade" id="tab4danger">Danger 4</div>
171 <div class="tab-pane fade" id="tab5danger">Danger 5</div>
172 </div>
173 </div>
174 </div>
175 </div>
176 </div>
177</div>
178<br/>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap 5 Food Order Card UI Design
Add a card to your UI with Bootstrap 5 Food Order Card UI Design. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.