"vertical tab (rtl)"
Bootstrap 4.1.1 Snippet by nasimnoorani73

<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 ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <section class="py-5 bg-gray"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-2 p-0"> <ul class="nav flex-column nav-tabs nav-tabs-vertical bg-gray-2 border-0 p-0" id="tabVertical" role="tablist"> <li class="nav-item"> <a class="nav-link text-color-dark p-3 active" id="vertical-general-tab" data-toggle="tab" href="#vertical-general" role="tab" aria-controls="vertical-portfolio" aria-expanded="true">قوانین</a> </li> <li class="nav-item"> <a class="nav-link text-color-dark p-3" id="vertical-website-tab" data-toggle="tab" href="#vertical-website" role="tab" aria-controls="vertical-website">وب سایت</a> </li> <li class="nav-item"> <a class="nav-link text-color-dark p-3" id="vertical-profile-tab" data-toggle="tab" href="#vertical-profile" role="tab" aria-controls="vertical-profile">پروفایل</a> </li> <li class="nav-item"> <a class="nav-link text-color-dark p-3" id="vertical-Processors-tab" data-toggle="tab" href="#vertical-Processors" role="tab" aria-controls="vertical-Processors">پردازنده</a> </li> <li class="nav-item"> <a class="nav-link text-color-dark p-3" id="vertical-Measures-tab" data-toggle="tab" href="#vertical-Measures" role="tab" aria-controls="vertical-Measures">محیط سازمان</a> </li> </ul> </div> <div class="col-md-8 bg-white max-height-300"> <div class="tab-content mt-2" id="tabVerticalContent"> <div class="tab-pane fade pb-4 show active" id="vertical-general" role="tabpanel" aria-labelledby="vertical-general-tab"> <h5 class="text-center mt-3 mb-2">عنوان اصلی</h5> <hr class="tall" /> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده </p> <p class="mb-0"> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> <div class="tab-pane fade pb-4" id="vertical-website" role="tabpanel" aria-labelledby="vertical-website-tab"> <h5 class="text-center mt-3 mb-2">عنوان اصلی</h5> <hr class="tall" /> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده </p> <p class="mb-0"> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> <div class="tab-pane fade pb-4" id="vertical-profile" role="tabpanel" aria-labelledby="vertical-profile-tab"> <h5 class="text-center mt-3 mb-2">عنوان اصلی</h5> <hr class="tall" /> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده </p> <p class="mb-0"> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> <div class="tab-pane fade pb-4" id="vertical-Processors" role="tabpanel" aria-labelledby="vertical-Processors-tab"> <h5 class="text-center mt-3 mb-2">عنوان اصلی</h5> <hr class="tall" /> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده </p> <p class="mb-0"> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> <div class="tab-pane fade pb-4" id="vertical-Measures" role="tabpanel" aria-labelledby="vertical-Measures-tab"> <h5 class="text-center mt-3 mb-2">عنوان اصلی</h5> <hr class="tall" /> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده </p> <p class="mb-0"> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> </div> </div> </div> </div> </section> </div>
body{ color: #707070; font-size: 13px; line-height: 22px; text-align: right; direction:rtl; } .max-height-300 { max-height: 300px; overflow: auto; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .bg-gray{ background-color: #f4f6f9 !important; } .bg-gray-2{ background-color: #e0e0e0 !important; } .nav-tabs { border-bottom: 1px solid #e1e1e1; } .nav-tabs > li { float: right; } .nav-tabs > li > a { margin-left: auto; margin-right: -2px; border-radius: 4px 4px 0 0; color:#333; } .nav-tabs .nav-item .nav-link { border: 0; background: transparent; padding: 20.8px; padding: 1.3rem; font-size: 1.1em; position: relative; overflow: hidden; border-radius: 0; } .nav-tabs .nav-item .nav-link:after { height: 4px; width: 100%; content: ' '; background-color: #2388ed; display: block; position: absolute; bottom: -4px; left: 0; z-index: 10; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .nav-tabs .nav-item .nav-link.active { color: #2388ed !important; background-color: #fff; } .nav-tabs .nav-item .nav-link.active:after { -webkit-transform: translateY(-3px); transform: translateY(-3px); } .nav-tabs.nav-tabs-centered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .nav-tabs.nav-tabs-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .nav-tabs.nav-tabs-minimal { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 0; } .nav-tabs.nav-tabs-vertical { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 0; border-right: 1px solid #e1e1e1; } .nav-tabs.nav-tabs-vertical .nav-item .nav-link { padding-left: 0; } .nav-tabs.nav-tabs-vertical .nav-item .nav-link:after { height: 100%; width: 4px; left: auto; right: -4px; bottom: 0; } .nav-tabs.nav-tabs-vertical .nav-item .nav-link.active:after { -webkit-transform: translateX(-3px); transform: translateX(-3px); }

Related: See More


Questions / Comments: