How to force tab-navigation to stay in place using Bootstrap ?

Tab-navigation: Tabs are made with <ul class=”nav nav-tabs”> and we use the <li class=”active”> element to mark the current page. To fix the position of navigation tab style, position: fixed; property is used.

Syntax:

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
    </li>
    . . .
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="home">content....</div>
    . . .
</div>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
            initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
        crossorigin="anonymous">
    </script>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
    </script>
      
    <style type="text/css">
  
        /* To stay in place use position property */
        .nav {
            position: fixed;
            background-color: lightgreen;
        }
    </style>
</head>
  
<body>
    <br>
    <nav class="container">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" 
                    href="#html" data-toggle="tab">
                    <b>HTML</b>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#css" 
                    data-toggle="tab">
                    <b>CSS</b>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contactus" 
                    data-toggle="tab">
                    <b>Contact</b>
                </a>
            </li>
        </ul>
    </nav>
  
    <!-- Tab content -->
    <div class="tab-content">
        <div class="container tab-pane active" id="html">
            <h3 style="color: green">GeeksforGeeks</h3>
            <h3>HTML Introduction</h3>
            <p>
                HTML stands for Hyper Text Markup Language.
                It is used to design web pages using markup
                language. HTML is the combination of Hypertext
                and Markup language. Hypertext defines the link
                between the web pages. Markup language is used
                to define the text document within tag which
                defines the structure of web pages. This language
                is used to annotate (make notes for the computer)
                text so that a machine can understand it and
                manipulate text accordingly. Most of markup
                (e.g. HTML) languages are human readable.
                Language uses tags to define what manipulation
                has to be done on the text.
            </p>
        </div>
        <div class="container tab-pane" id="css">
            <h3 style="color: green">GeeksforGeeks</h3>
            <h3>CSS Introduction</h3>
            <p>
                Cascading Style Sheets, fondly referred to as CSS,
                is a simply designed language intended to simplify
                the process of making web pages presentable. CSS
                allows you to apply styles to web pages. More
                importantly, CSS enables you to do this independent
                of the HTML that makes up each web page. CSS is easy
                to learn and understood but it provides powerful
                control over the presentation of an HTML document.
            </p>
        </div>
        <div class="container tab-pane" id="contactus">
            <h3 style="color: green">GeeksforGeeks</h3>
            <h3>Contact Form</h3>
            <form>
                <div class="form-group row">
                    <label for="em" class="col-12 col-md-2 
                        col-form-label">Email ID:</label>
                    <div class="col-4">
                        <input type="text" class="form-control" 
                            id="em" name="em" placeholder="Email">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="ym" class="col-12 col-md-2 
                        col-form-label">Your Message:</label>
                    <div class="col-4">
                        <input type="text" class="form-control" 
                            id="ym" name="ym" 
                            placeholder="Your message..">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="offset-md-2 col-md-10">
                        <button type="submit" 
                            class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.