[Bootstrap] List Group and Tab

<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>

--

--

--

iOS developer(Obj-C & Swift) / Web developer (Java, Javascript, CSS,HTML)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Breaking Down the Call Stack

Furlexa: Building an Animatronic Voice Assistant (the easy way)

Brotli, What is it ?

I made Django Blog App Tutorial

视频 | ENF诞生及发展、追责B1事件始末、屠龙少年的崛起

Ditch your SSH keys and enable AWS SSM!

Lock in SQL Server

EyeCheckup DevOps Case Study

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
SC Tuan

SC Tuan

iOS developer(Obj-C & Swift) / Web developer (Java, Javascript, CSS,HTML)

More from Medium

Spring4Shell and Spring Cloud Function Vulnerabilities

Resolving Problems Using Nagios with Proxies

Static libraries

An implementation of TLS Handshake Part 6: Server Handshake Finished