What Will I Learn?

You will learn how to programming languages
You will learn how to create navbar tabs
You will learn how to create tabs content
You will learn how to use bootstrap

Requirements

You must have interest first
You have basic about Hypertext Markup Language (HTML)
You have basic about Cascading Style Sheets (CSS )

Difficulty

Intermediate

Tool

Subline Text

Source Picture

Google Crome

Source Picture

Tutorial Contents

As we know the tab is a navigation element that allows users to enter the web in one window contained in the browser, And tabs such as learning today is a very often we meet in each case but we just confused how we create tabs nav-bar with pemogram language, Many people will say how to make tab using programming language will be very difficult but they have surrendered before trying if you are the curator how how to create tab in the form of dynamic , Then you must follow the following steps:

The first step you have to create a .html file that will be used as a dynamic tabbed file, for example like the author created a file (2.html) or you can also use the name you like in tab making this time and important thing you should remember is the making of this file occurs in subline text because the author uses subline text if you use text editor different version you can also make it origin must have text editor.
As usual the second step is to make the skeleton first if you are already proficient in the programming language you can immediately make it thoroughly.

Then for the third step to note is on every bootstrap usage we have to do is to host the boostrap file that we will execute or you can also add the boostrap CDN in your program, And for this time the author will use CDC version only because for the version is easier in the process of processing and also users who will access it will be greatly helped by all facilities on offer because it is very complete, Paste the syntax listed below in the file 2.html :

For the next step is the creation of the dynamic tab, first you have to make the class first and the author uses nav-bar as its class and for the dynamic tab the author makes 1 home and 6 tab content and for each call must be the same as the tab you want to call, Or you can write the following syntax:

The last step is the classroom in each tab that has been in inputkan and usually for each tab that has been made will look interesting if given a little writing or words of motivation or it could be with your imagination each, for syntax summoning you can input syntax below:

The syntax is below

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <title>Dinamic Tabs</title>
</head>
    <body>
        <center>
        <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
        <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
        <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
        <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
        </center>
        <center>
            <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <br>
            <br>
            <br>
            <h4> 
                HELLO A HAPPY UTOPIAN FRIEND
            </h4>
            </div>
            <div id="tab1" class="tab-pane fade">
            <h3>COLUMN CONTENT</h3>
            <br>
            <br>
            <br>
            <h4>
                DO GOOD TO OTHERS BECAUSE GOOD DEEDS WILL GET GOOD THINGS TOO
            </div>
            <div id="tab2" class="tab-pane fade">
            <h3>COLUMN CONTENT</h3>
            <br>
            <br>
            <br>
            <h4>
                DO NOT YOU GIVE UP BECAUSE SUCCESS HAS BEEN WAITING FOR YOU OUT THERE
            </h4>
            </div>
            <div id="tab3" class="tab-pane fade">
            <h3>COLUMN CONTENT</h3>
            <br>
            <br>
            <br>
            <h4>
                LIVE YOUR DAY WITH A SMILE BECAUSE THE SMILE CAN MAKE THE DAY BEAUTIFUL
            </h4>
            </div>
            <div id="tab4" class="tab-pane fade">
            <h3>COLUMN CONTENT</h3>
            <br>
            <br>
            <br>
            <h4>
                ALL PROBLEMS WILL PASS AND WILL ALTERNATE WITH HAPPINESS 
            </h4>
            </div>
            <div id="tab5" class="tab-pane fade">
            <h3>COLUMN CONTENT</h3>
            <br>
            <br>
            <br>
            <h4>
                THE RAINBOW WILL RISE AFTER RAIN AS WELL AS HAPPINESS WILL COME AFTER DISTRESS
            </h4>
            </div>
            <div id="tab6" class="tab-pane fade">
            <h3>COLUMN CONTENT</h3>
            <br>
            <br>
            <br>
            <h4>
                LIFE IS LIKE A SPINNING WHEEL SO THEREFORE DO NOT YOU ARROGANT
            </h4>
        </center>
        </div>
        </div>
        </ul>
    </body>

And the results of the syntax that has been executed above will produce a tab like the picture below:

ALL SYNTAX IN GDRIVE : Download Here

Thank You For Coming My Utopian

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @rckymaulana I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
This is your first accepted contribution here in Utopian. Welcome!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

How To Create Dynamic Tabs Using Bootstrap