@extends('layouts.master') @section('title', 'Tab-bootstrap') @section('css') @endsection @section('breadcrumb')

Bootstrap Tabs

@endsection @section('main_content')

Simple Tabs

Use the nav-link with active class to jump particular tabs.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.

profile
  • Visit Us: 2600 Hollywood Blvd,Florida, United States-33020
  • Mail Us: contact@us@gmail.com
  • Contact Number: (954) 357-7760
  • Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
  • Visit Us: 2600 Hollywood Blvd,Florida, United States- 33020
  • Mail Us: contact@us@gmail.com
  • Contact Number: (954) 357-7760
<ul class="simple-wrapper nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item"><a class="nav-link txt-primary" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
 <li class="nav-item"><a class="nav-link active txt-primary" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
 <li class="nav-item"><a class="nav-link txt-primary" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
 <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
   <p class="pt-3">This is some placeholder content the<b>Home tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
 <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tabs">
   <div class="pt-3 mb-0">
     <div class="flex-space flex-wrap align-items-center"><img class="tab-img" src="{{ asset('assets/images/avtar/3.jpg') }}" alt="profile">
       <ul class="d-flex flex-column gap-1">
         <li>
           <strong>Visit Us:</strong>2600 Hollywood Blvd,Florida, United States-33020
         </li>
         <li>
           <strong>Mail Us:</strong>contact@us@gmail.com
         </li>
         <li>
           <strong>Contact Number:</strong>(954) 357-7760
         </li>
       </ul>
     </div>
   </div>
 </div>
 <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
   <ul class="pt-3 d-flex flex-column gap-1">
     <li>Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.</li>
     <li>
       <strong>Visit Us:</strong>2600 Hollywood Blvd,Florida, United States-33020
     </li>
     <li>
       <strong>Mail Us:</strong>contact@us@gmail.com
     </li>
     <li>
       <strong>Contact Number:</strong>(954) 357-7760
     </li>
   </ul>
 </div>
</div>

Icons with Tabs

Use the nav-link with active class to switch particular tabs and with "Ico" icons you can take "tab".

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.

profile
  • Visit Us: 278 Green Avenue Oakland, CA 94612
  • Mail Us: MichaelMMcGowan@teleworm.us
  • Contact Number: 510-767-0025

Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them. 

<ul class="nav nav-tabs" id="icon-tab" role="tablist">
 <li class="nav-item">
   <a class="nav-link active txt-secondary" id="icon-home-tab" data-bs-toggle="tab" href="#icon-home" role="tab" aria-controls="icon-home" aria-selected="true">
     <i class="icofont icofont-ui-home"></i>Home
   </a>
 </li>
 <li class="nav-item">
   <a class="nav-link txt-secondary" id="profile-icon-tabs" data-bs-toggle="tab" href="#profile-icon" role="tab" aria-controls="profile-icon" aria-selected="false">
     <i class="icofont icofont-man-in-glasses"></i>Profile
   </a>
 </li>
 <li class="nav-item">
   <a class="nav-link txt-secondary" id="contact-icon-tab" data-bs-toggle="tab" href="#contact-icon" role="tab" aria-controls="contact-icon" aria-selected="false">
     <i class="icofont icofont-contacts"></i>Contact
   </a>
 </li>
</ul>
<div class="tab-content" id="icon-tabContent">
 <div class="tab-pane fade show active" id="icon-home" role="tabpanel" aria-labelledby="icon-home-tab">
   <p class="pt-3">This is some placeholder content the<b>home tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
 <div class="tab-pane fade" id="profile-icon" role="tabpanel" aria-labelledby="profile-icon-tabs">
   <div class="pt-3 mb-0">
     <div class="flex-space flex-wrap align-items-center">
       <img class="tab-img" src="{{ asset('assets/images/avtar/7.jpg') }}" alt="profile">
       <ul class="d-flex flex-column gap-1">
         <li>
           <strong>Visit Us:</strong>278 Green Avenue Oakland, CA 94612
         </li>
         <li>
           <strong>Mail Us:</strong>MichaelMMcGowan@teleworm.us
         </li>
         <li>
           <strong>Contact Number:</strong>510-767-0025
         </li>
       </ul>
     </div>
   </div>
 </div>
 <div class="tab-pane fade" id="contact-icon" role="tabpanel" aria-labelledby="contact-icon-tab">
   <p class="pt-3">Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.</p>
   <label class="form-label" for="exampleFormControlone">Email Address</label>
   <input class="form-control" id="exampleFormControlone" type="email" placeholder="youremail@gmail.com">
 </div>
</div>

Vertical Tabs

Use the #var-pills-tab id to change vertical tabs.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Component tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Page tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Setting tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="row">    
 <div class="col-md-4 col-xs-12">
   <div class="nav flex-column nav-pills nav-secondary" id="ver-pills-tab" role="tablist" aria-orientation="vertical"><a class="nav-link" id="ver-pills-home-tab" data-bs-toggle="pill" href="#ver-pills-home" role="tab" aria-controls="ver-pills-home" aria-selected="true">Home</a><a class="nav-link active" id="ver-pills-components-tab" data-bs-toggle="pill" href="#ver-pills-components" role="tab" aria-controls="ver-pills-components" aria-selected="false">Components</a><a class="nav-link" id="ver-pills-pages-tab" data-bs-toggle="pill" href="#ver-pills-pages" role="tab" aria-controls="ver-pills-pages" aria-selected="false">Pages</a><a class="nav-link" id="ver-pills-settings-tab" data-bs-toggle="pill" href="#ver-pills-settings" role="tab" aria-controls="ver-pills-settings" aria-selected="false">Settings</a></div>
 </div>
 <div class="col-md-8 col-xs-12">
   <div class="tab-content" id="ver-pills-tabContent">
     <div class="tab-pane fade" id="ver-pills-home" role="tabpanel" aria-labelledby="ver-pills-home-tab">
       <p>This is some placeholder content the<b>Home tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other<b>.nav</b>-powered navigation.</p>
     </div>
     <div class="tab-pane fade show active" id="ver-pills-components" role="tabpanel" aria-labelledby="ver-pills-components-tab">
       <p>This is some placeholder content the<b>Component tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other<b>.nav</b>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="ver-pills-pages" role="tabpanel" aria-labelledby="ver-pills-pages-tab">
       <p>This is some placeholder content the<b>Page tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other<b>.nav</b>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="ver-pills-settings" role="tabpanel" aria-labelledby="ver-pills-settings-tab">
       <p>This is some placeholder content the<b>Setting tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other<b>.nav</b>-powered navigation.</p>
     </div>
   </div>
 </div>
</div>

Pills Tabs

Use the data-bs-toggle="pill" for tabs pill shape.

The ultimate goal of every web design is to create a site that will reach its audience and be useful to them. In order to achieve that, it is necessary to befriend Google's mechanisms and algorithms. There is no use of a pretty website, if it's displayed on a 10th page of search results, because this way no one will ever find it. That brings us to the topic of Google's Website Ranking.Generally speaking, it's a list of pages and their keywords, sorted in the order of search results. The higher your place in the ranking is, the more people are likely to see your page.

  • Create professional web page design. Responsive, fully customizable with easy Drag-n-Drop Nicepage editor. Adjust colors, fonts, header and footer, layout and other design elements, as well as content and images.
  • Visit Us: 4 Marigold Close, Glenmore Park, New South Wales, 2745 Australia- 2745
  • Mail Us: SamuelMario@armyspy.com
  • Contact Number: (02) 4733 6337
head-phone

Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.

<ul class="nav nav-pills nav-primary" id="pills-tab" role="tablist">
 <li class="nav-item">
   <a class="nav-link" id="pills-aboutus-tab" data-bs-toggle="pill" href="#pills-aboutus" role="tab" aria-controls="pills-aboutus" aria-selected="true">About us
   </a>
 </li>
 <li class="nav-item">
   <a class="nav-link" id="pills-contactus-tab" data-bs-toggle="pill" href="#pills-contactus" role="tab" aria-controls="pills-contactus" aria-selected="false">Contact us
   </a>
 </li>
 <li class="nav-item">
   <a class="nav-link active" id="pills-blog-tab" data-bs-toggle="pill" href="#pills-blog" role="tab" aria-controls="pills-blog" aria-selected="false">Blog
   </a>
 </li>
</ul>
<div class="tab-content" id="pills-tabContent">
 <div class="tab-pane fade" id="pills-aboutus" role="tabpanel" aria-labelledby="pills-aboutus-tab">
   <p class="pt-3">The ultimate goal of every web design is to create a site that will reach its audience and be useful to them. In order to achieve that, it is necessary to befriend Google's mechanisms and algorithms. There is no use of a pretty website, if it's displayed on a 10th page of search results, because this way no one will ever find it. That brings us to the topic of Google's Website Ranking.Generally speaking, it's a list of pages and their keywords, sorted in the order of search results. The higher your place in the ranking is, the more people are likely to see your page.</p>
 </div>
 <div class="tab-pane fade" id="pills-contactus" role="tabpanel" aria-labelledby="pills-contactus-tab">
   <ul class="d-flex flex-column gap-1 pt-3">
     <li>Create professional web page design. Responsive, fully customizable with easy drag-n-drop nice page editor. Adjust colors, fonts, header and footer, layout and other design elements, as well as content and images.</li>
     <li>
       <strong>Visit Us:</strong>4 Marigold Close, Glenmore Park, New South Wales, 2745 Australia- 2745
     </li>
     <li>
       <strong>Mail Us:</strong>SamuelMario@armyspy.com
     </li>
     <li>
       <strong>Contact Number:</strong>(02) 4733 6337
     </li>
   </ul>
 </div>
 <div class="tab-pane fade show active" id="pills-blog" role="tabpanel" aria-labelledby="pills-blog-tab">
   <div class="pt-3 d-flex align-items-center gap-3 pills-blogger"> 
     <div class="blog-wrapper">
       <img class="blog-img" src="{{ asset('assets/images/dashboard-2/headphones.png') }}" alt="head-phone">
     </div>
     <div class="blog-content"> 
       <p>
         <strong>Smart headphones</strong> — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
       </p>
     </div>
   </div>
 </div>
</div>

Justify Tabs

Use the nav-link with active class and set content using flex property.

MOFI Profiles For New Employees:

profile
Kathy M. Anderson

440-494-0729

profile
Lillian J. Goodfellow

239-664-7751

profile
Carolyn A. Sutton

218-793-6609

profile
Mary O. Miller

720-744-0921

profile
Patricia H. Hummel

314-445-1451

profile
Minnie F. Evans

718-740-8438

profile
Thomas A. Leroy

305-539-6871

profile
Mark S. Ward

303-561-8880

profile
Emily T. Hooper

301-553-1836

profile
Natasha W. Watson

267-605-4499

profile
Jennifer A. Camacho

770-527-7554

profile
Ann J. Strickland

469-218-4678

profile
Jaclyn T. Duncan

413-618-9222

profile
Christine H. Lin

909-219-0342

profile
Ronnie S. Mountain

978-426-9732

profile
Louise A. Hilliard

502-262-5600

profile
Kayla Hutt

312-456-8275

profile
Amber Cecil

802-662-2407

<div class="tab-content" id="j-pills-tabContent">
 <div class="tab-pane fade" id="j-pills-web-designer" role="tabpanel" aria-labelledby="j-pills-web-designer-tab">
   <div class="designer-details">
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/user/3.png') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Kathy M. Anderson</h6>
           <p>440-494-0729</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/avtar/4.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Lillian J. Goodfellow</h6>
           <p>239-664-7751</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/user/2.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Carolyn A. Sutton</h6>
           <p>218-793-6609</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/avtar/11.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Mary O. Miller</h6>
           <p>720-744-0921</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/avtar/16.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Patricia H. Hummel</h6>
           <p>314-445-1451</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/blog/4.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Minnie F. Evans</h6>
           <p>718-740-8438</p>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="tab-pane fade show active" id="j-pills-UX-designer" role="tabpanel" aria-labelledby="j-pills-UX-designer-tab">
   <div class="designer-details">
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/1.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Thomas A. Leroy</h6>
           <p>305-539-6871</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/4.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Mark S. Ward</h6>
           <p>303-561-8880</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/2.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Emily T. Hooper</h6>
           <p>301-553-1836</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/7.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Natasha W. Watson</h6>
           <p>267-605-4499</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/10.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Jennifer A. Camacho</h6>
           <p>770-527-7554</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/11.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Ann J. Strickland</h6>
           <p>469-218-4678</p>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="tab-pane fade" id="j-pills-IOT-developer" role="tabpanel" aria-labelledby="j-pills-IOT-developer-tab">
   <div class="designer-details">
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/3.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Jaclyn T. Duncan</h6>
           <p>413-618-9222</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/8.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Christine H. Lin</h6>
           <p>909-219-0342</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/12.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Ronnie S. Mountain</h6>
           <p>978-426-9732</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/5.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Louise A. Hilliard</h6>
           <p>502-262-5600</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-9/user/3.png') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Kayla Hutt</h6>
           <p>312-456-8275</p>
         </div>
       </div>
     </div>
     <div class="designer-profile"> 
       <div class="designer-wrap"><img class="designer-img" src="{{ asset('assets/images/dashboard-11/user/9.jpg') }}" alt="profile">
         <div class="designer-content"> 
           <h6>Amber Cecil</h6>
           <p>802-662-2407</p>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>

Material Style Left Tabs

Use the nav-link with active class for switching to another tabs and aria-orientation='vertical'for vertical tabs.

This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different sizes or audiences with responsive and dynamic workflows.

profile
  • Name: Jully Catlin
  • Visit Us: 50006 Ehrenberg/Parker,Arkansas-85334
  • Mail Us: hello.@gmail.com
  • Contact Number: (928) 923-7940
profile
Dalbult Caslin

stroman.rogers@gmail.com

Compare Prices Find the Best Computer Assessors Fronted Issue.

Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.

In this situation, you would probably do two things: exit the page, or look for the trusty search bar. If you decide to stick around, a proper search function should take your query and send you to your destination. Problem solved. It's not a perfect experience, but it's a hard one to avoid on larger websites that simply can't link to every piece of content from the homepage.

<div class="tabs-responsive-side">
 <div class="material-wrapper">
   <div class="d-flex">
     <div class="nav flex-column nav-secondary border-tab nav-left" id="sideline-tab" role="tablist" aria-orientation="vertical"><a class="nav-link nav-effect active" id="sideline-home-tab" data-bs-toggle="pill" href="#sideline-home" role="tab" aria-controls="sideline-home" aria-selected="true">Home</a><a class="nav-link nav-effect" id="sideline-profile-tab" data-bs-toggle="pill" href="#sideline-profile" role="tab" aria-controls="sideline-profile" aria-selected="false">Profile</a><a class="nav-link nav-effect" id="sideline-messages-tab" data-bs-toggle="pill" href="#sideline-messages" role="tab" aria-controls="sideline-messages" aria-selected="false">Inbox</a><a class="nav-link nav-effect pb-0" id="sideline-settings-tab" data-bs-toggle="pill" href="#sideline-settings" role="tab" aria-controls="sideline-settings" aria-selected="false">Settings</a></div>
   </div>
   <div class="material-content">
     <div class="tab-content" id="sideline-tabContent">
       <div class="tab-pane fade show active" id="sideline-home" role="tabpanel" aria-labelledby="sideline-home-tab">
         <p>This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different sizes or audiences with responsive and dynamic workflows.</p>
       </div>
       <div class="tab-pane fade" id="sideline-profile" role="tabpanel" aria-labelledby="sideline-profile-tab">
         <div class="flex-space flex-wrap align-items-center"><img class="tab-img" src="{{ asset('assets/images/ecommerce/08.jpg') }}" alt="profile">
           <ul class="d-flex flex-column gap-1">
             <li><strong>Name:</strong>Jake Catlin</li>
             <li><strong>Visit Us:</strong>50006 Ehrenberg/Parker,Arkansas-85334</li>
             <li><strong>Mail Us:</strong>Jake.@gmail.com</li>
             <li><strong>Contact Number:</strong>(928) 923-7940</li>
           </ul>
         </div>
       </div>
       <div class="tab-pane fade" id="sideline-messages" role="tabpanel" aria-labelledby="sideline-messages-tab">
         <div class="card-body p-0">
           <div class="main-inbox"> 
             <div class="header-inbox justify-content-start gap-2">
               <div class="header-left-inbox">
                 <div class="inbox-img"><img src="{{ asset('assets/images/ecommerce/07.jpg') }}" alt="profile"></div>
               </div>
               <div class="inbox-content"> 
                 <h6>Dalbult Caslin</h6>
                 <p class="text-muted">stroman.rogers@gmail.com</p>
               </div>
             </div>
             <div class="body-inbox mt-2">
               <div class="body-h-wrapper"><i class="me-2 tab-space icofont icofont-star"></i><em>Compare Prices Find the Best Computer Assessors Fronted Issue.</em></div>
               <p class="pt-2">Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.</p>
             </div>
           </div>
         </div>
       </div>
       <div class="tab-pane fade" id="sideline-settings" role="tabpanel" aria-labelledby="sideline-settings-tab">
         <p><strong>In this situation, you would probably do two things:</strong> exit the page, or look for the trusty search bar. If you decide to stick around, a proper search function should take your query and send you to your destination. Problem solved. It's not a perfect experience, but it's a hard one to avoid on larger websites that simply can't link to every piece of content from the homepage.</p>
       </div>
     </div>
   </div>
 </div>
</div>

Material Style Tabs

Use the nav-link with active class to switch and customize tabs.

User Details:
# Name Country Contact No
1 Neha India 5698741236
2 Jacklin Thailand 7800030320
Description:
Technology Interest Salary Expected
Web Designer HTML,CSS,JS,SCSS 45000
UX Designer Figma,Photoshop,craft 20000
Review:
# Name Country Rating
1 Neha India
2 Irfan India 
<ul class="nav nav-tabs border-tab border-0 mb-0 nav-secondary" id="topline-tab" role="tablist">
 <li class="nav-item"><a class="nav-link active nav-border pt-0 txt-secondary nav-secondary" id="topline-top-user-tab" data-bs-toggle="tab" href="#topline-top-user" role="tab" aria-controls="topline-top-user" aria-selected="true"><i class="icofont icofont-man-in-glasses"></i>User</a></li>
 <li class="nav-item"><a class="nav-link nav-border txt-secondary nav-secondary" id="topline-top-description-tab" data-bs-toggle="tab" href="#topline-top-description" role="tab" aria-controls="topline-top-description" aria-selected="false"><i class="icofont icofont-file-document"></i>Description</a></li>
 <li class="nav-item"><a class="nav-link nav-border txt-secondary nav-secondary" id="topline-top-review-tab" data-bs-toggle="tab" href="#topline-top-review" role="tab" aria-controls="topline-top-review" aria-selected="false"><i class="icofont icofont-star"></i>Review</a></li>
</ul>
<div class="tab-content" id="topline-tabContent">
 <div class="tab-pane fade show active" id="topline-top-user" role="tabpanel" aria-labelledby="topline-top-user-tab">
   <div class="card-body px-0 pb-0">  
     <div class="user-header pb-2"> 
       <h6 class="fw-bold">User Details:</h6>
     </div>
     <div class="user-content"> 
       <div class="table-responsive theme-scrollbar">
         <table class="table mb-0">
           <thead>
             <tr>
               <th scope="col">#</th>
               <th scope="col">Name</th>
               <th scope="col">Country</th>
               <th scope="col">Contact No</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <th scope="row">1</th>
               <td>Neha</td>
               <td>India </td>
               <td>5698741236</td>
             </tr>
             <tr>
               <th scope="row">2</th>
               <td>Jacklin</td>
               <td>Thailand</td>
               <td>7800030320</td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
   </div>
 </div>
 <div class="tab-pane fade" id="topline-top-description" role="tabpanel" aria-labelledby="topline-top-description-tab">
   <div class="card-body px-0 pb-0"> 
     <div class="user-header pb-2"> 
       <h6 class="fw-bold">Description:</h6>
     </div>
     <div class="user-content"> 
       <div class="table-responsive theme-scrollbar">
         <table class="table mb-0">
           <thead>
             <tr>
               <th scope="col">Technology</th>
               <th scope="col">Interests</th>
               <th scope="col">Salary Expected</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td>Web Designer</td>
               <td>HTML,CSS,JS,SCSS</td>
               <td>45000</td>
             </tr>
             <tr>
               <td>UX Designer</td>
               <td>Figma,Photoshop,Sketch</td>
               <td>20000</td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
   </div>
 </div>
 <div class="tab-pane fade" id="topline-top-review" role="tabpanel" aria-labelledby="topline-top-review-tab">
   <div class="card-body px-0 pb-0">
     <div class="user-header pb-2"> 
       <h6 class="fw-bold">Review:</h6>
     </div>
     <div class="user-content"> 
       <div class="table-responsive theme-scrollbar">
         <table class="table mb-0">
           <thead>
             <tr>
               <th scope="col">#</th>
               <th scope="col">Name</th>
               <th scope="col">Country</th>
               <th scope="col">Rating</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <th scope="row">1</th>
               <td>Neha</td>
               <td>India </td>
               <td><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i></td>
             </tr>
             <tr>
               <th scope="row">2</th>
               <td>Irfan</td>
               <td>India</td>
               <td><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i></td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
   </div>
 </div>
</div>

Border Tabs

Use the nav-link with active class to add bottom border styles.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.To convey the active state to assistive technologies, use the aria-current attribute — using the page value for current page, or true for the current item in a set. The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

profile
Dalbult Caslin

stroman.rogers@gmail.com

  • 8 JAN 11:30PM

Compare Prices Find the Best Computer Assessors Fronted Issue.

Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.

<ul class="nav nav-tabs border-tab mb-0" id="border-tab" role="tablist">
 <li class="nav-item"><a class="nav-link nav-border txt-primary tab-primary pt-0" id="bottom-home-tab" data-bs-toggle="tab" href="#bottom-home" role="tab" aria-controls="bottom-home" aria-selected="true"><i class="icofont icofont-ui-home"> </i>Home</a></li>
 <li class="nav-item"><a class="nav-link nav-border txt-primary tab-primary active" id="bottom-inbox-tab" data-bs-toggle="tab" href="#bottom-inbox" role="tab" aria-controls="bottom-inbox" aria-selected="false"><i class="icofont icofont-ui-message"></i>Inbox</a></li>
 <li class="nav-item"><a class="nav-link nav-border txt-primary tab-primary" id="bottom-contact-tab" data-bs-toggle="tab" href="#bottom-contact" role="tab" aria-controls="bottom-contact" aria-selected="false"><i class="icofont icofont-man-in-glasses"></i>Contact</a></li>
</ul>
<div class="tab-content" id="border-tabContent">
 <div class="tab-pane fade" id="bottom-home" role="tabpanel" aria-labelledby="bottom-home-tab">
   <p class="pt-3">This is some placeholder content the<strong>Home tab's</strong>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other<strong>.nav</strong>-powered navigation.To convey the<strong>active</strong> state to assistive technologies, use the<strong>aria-current</strong> attribute — using the page value for current page, or true for the current item in a set. The base<strong>nav</strong> component is built with flexbox and provide a strong foundation for building all types of navigation components.</p>
 </div>
 <div class="tab-pane fade show active" id="bottom-inbox" role="tabpanel" aria-labelledby="bottom-inbox-tab">
   <div class="card-body pb-0">
     <div class="main-inbox"> 
       <div class="header-inbox"> 
         <div class="header-left-inbox">
           <div class="inbox-img"><img src="{{ asset('assets/images/ecommerce/06.jpg') }}" alt="profile"></div>
           <div class="inbox-content"> 
             <h6>Dalbult Caslin </h6>
             <p class="text-muted">stroman.rogers@gmail.com</p>
           </div>
         </div>
         <ul class="header-right-inbox">
           <li> 
             <p>8 JAN 11:30PM</p>
           </li>
           <li><i class="txt-danger icofont icofont-ui-delete"></i></li>
           <li><i class="icofont icofont-telegram"></i></li>
         </ul>
       </div>
       <div class="body-inbox mt-2">
         <div class="body-h-wrapper"><i class="me-2 tab-space icofont icofont-star"></i><em>Compare Prices Find the Best Computer Assessors Fronted Issue.</em></div>
         <p class="pt-2">Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.</p>
       </div>
     </div>
   </div>
 </div>
 <div class="tab-pane fade" id="bottom-contact" role="tabpanel" aria-labelledby="bottom-contact-tab">
   <div class="card-body px-0 pb-0"> 
     <div class="form"> 
       <div class="mb-3">
         <label class="form-label" for="exampleFormControltwo">Email address</label>
         <input class="form-control" id="exampleFormControltwo" type="email" placeholder="youremail@gmail.com">
       </div>
       <div class="mb-0">
         <label class="form-label" for="exampleFormControlTextarea1">Example textarea</label>
         <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
       </div>
     </div>
   </div>
 </div>
</div>

Background Pill Tab

Use of the active class on the nav-link and backdrop tab with the new-pills class.

sofa
sofa
sofa
chairs
chairs
chairs
table
table
table

Arrow Tabs

Use of the active class on the nav-link and arrow tab with the new-item class.

Your account details serve as the digital gateway to safe, customized online experiences. Modern security measures are in place to safeguard your data, and we have given top priority to the smooth handling of your account details during the building of our website.

We design systems that enable customers to easily update and access their account information, from user-friendly interfaces to simple navigation. Because of our dedication to openness, you have easy access to change settings, see transaction history, and customize your preferences while being informed. With our website solutions, you can take account management to the next level. Your information is protected, and your digital trip is customized to meet your demands.

table
table
table
In what area are you an expert?

Summarize your expertise for us in a few crucial terms. Make careful to select these tags carefully, since they will appear on your portfolio page.

  • HTML5
  • CSS3
  • Javascript
  • React
  • SQL

We will handle your payment procedure, saving you the trouble of following up with clients after each assignment. We'll try our hardest to make sure you receive your money promptly and equitably.

Seamless website development requires a foundation that's reliable and efficient. Enter the installment process – the bedrock of building a powerful online presence. Installments in website development refer to the strategic implementation of features, functionalities, and updates in a phased manner, ensuring smooth integration and optimal performance.

Bottom Tabs

Use of the active class on the nav-link. It is possible to build a arrow tab with the new-item class.

CSS

"One of the three main web technologies is CSS. The terms "cascading" and "style," with cascading indicating how one style can cascade from another, are actually the key to understanding CSS, which stands for Cascading Style Sheets."

To specify how HTML code will appear on a website, utilize CSS.

Vendors

To improve the development of your website, find a carefully chosen list of premier suppliers. Use our dependable network to locate the ideal partners for the accomplishment of your project.

Cutting-edge design tools, or specialized services, our curated list ensures you have access to the best resources for a seamless and successful website development experience.

Javascript

Development of interactive and adaptable websites is made possible by JavaScript, the web's dynamic programming language.

Building strong and interactive online apps requires JavaScript, which is essential for everything from enabling asynchronous requests to designing captivating user interfaces.

Animated Horizontal Tabs

Use of the active class on the nav-link. It is possible to build a animated tab with the horizontal-icons-tab class.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

This is some placeholder content the About tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

This is some placeholder content the Gallery tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

This is some placeholder content the FAQ tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

<ul class="nav nav-tabs border-tab mb-0" id="bottom-tab" role="tablist">
 <li class="nav-item"><a class="nav-link tab-info" id="h-home-tab" data-bs-toggle="tab" href="#h-home" role="tab" aria-controls="h-home" aria-selected="true"><i class="icofont icofont-building-alt"></i>Home</a></li>
 <li class="nav-item"><a class="nav-link tab-info active" id="h-profile-tab" data-bs-toggle="tab" href="#h-profile" role="tab" aria-controls="h-profile" aria-selected="false"><i class="icofont icofont-user-male"></i>Profile</a></li>
 <li class="nav-item"><a class="nav-link tab-info" id="h-about-tab" data-bs-toggle="tab" href="#h-about" role="tab" aria-controls="h-about" aria-selected="false"><i class="icofont icofont-business-man"></i>About Us</a></li>
 <li class="nav-item"><a class="nav-link tab-info" id="h-gallery-tab" data-bs-toggle="tab" href="#h-gallery" role="tab" aria-controls="h-gallery" aria-selected="false"><i class="icofont icofont-picture"></i>Gallery</a></li>
 <li class="nav-item"><a class="nav-link tab-info" id="h-faq-tab" data-bs-toggle="tab" href="#h-faq" role="tab" aria-controls="h-faq" aria-selected="false"><i class="icofont icofont-question-circle"></i>FAQ</a></li>
</ul>
<div class="tab-content" id="bottom-tabContent">
 <div class="tab-pane fade" id="h-home" role="tabpanel" aria-labelledby="h-home-tab">
   <p class="pt-3">This is some placeholder content for the<b>Home tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
 <div class="tab-pane fade show active" id="h-profile" role="tabpanel" aria-labelledby="h-profile-tab">
   <p class="pt-3">This is some placeholder content the<b>Profile tab's</b> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
 <div class="tab-pane fade" id="h-about" role="tabpanel" aria-labelledby="h-about-tab">
   <p class="pt-3">This is some placeholder content the<b>About tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
 <div class="tab-pane fade" id="h-gallery" role="tabpanel" aria-labelledby="h-gallery-tab">
   <p class="pt-3">This is some placeholder content the<b>Gallery tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
 <div class="tab-pane fade" id="h-faq" role="tabpanel" aria-labelledby="h-faq-tab">
   <p class="pt-3">This is some placeholder content the<b>FAQ tab's</b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.</p>
 </div>
</div>
@endsection @section('scripts') @endsection