HTML Tab using BootStrap

up vote
0
down vote

favorite

I am trying to follow this tutorial. I put below code in my HTML Document.

  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

I am getting output like below

Why it is happening like this ?

html tabs bootstrap-4

share|improve this question

asked 17 hours ago

abu abu

1,00321438

• 
  
  
  

  
  

  
  
  
  
  
  

  
  have you included boostrap?
  – richflow
  17 hours ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  also note that in your link it's using version bootstrap 3.3.7 (and for some reason a different version of the JS). In bootstrap 4, navs use the class names 'nav' and 'nav-link' instead: getbootstrap.com/docs/4.0/components/navs
  – richflow
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks @richflow. You got my issue. I am using Bootstrap 4.1.3. I need Bootstrap 4 tabs. Thanks
  – abu abu
  16 hours ago
  

  
  
  
  

add a comment | 

up vote
0
down vote

favorite

I am trying to follow this tutorial. I put below code in my HTML Document.

  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

I am getting output like below

Why it is happening like this ?

html tabs bootstrap-4

share|improve this question

asked 17 hours ago

abu abu

1,00321438

• 
  
  
  

  
  

  
  
  
  
  
  

  
  have you included boostrap?
  – richflow
  17 hours ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  also note that in your link it's using version bootstrap 3.3.7 (and for some reason a different version of the JS). In bootstrap 4, navs use the class names 'nav' and 'nav-link' instead: getbootstrap.com/docs/4.0/components/navs
  – richflow
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks @richflow. You got my issue. I am using Bootstrap 4.1.3. I need Bootstrap 4 tabs. Thanks
  – abu abu
  16 hours ago
  

  
  
  
  

add a comment | 

up vote
0
down vote

favorite

up vote
0
down vote

favorite

I am trying to follow this tutorial. I put below code in my HTML Document.

  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

I am getting output like below

Why it is happening like this ?

html tabs bootstrap-4

share|improve this question

asked 17 hours ago

abu abu

1,00321438

I am trying to follow this tutorial. I put below code in my HTML Document.

  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

I am getting output like below

Why it is happening like this ?

html tabs bootstrap-4

html tabs bootstrap-4

share|improve this question

asked 17 hours ago

abu abu

1,00321438

share|improve this question

asked 17 hours ago

abu abu

1,00321438

share|improve this question

share|improve this question

asked 17 hours ago

abu abu

1,00321438

asked 17 hours ago

abu abu

1,00321438

asked 17 hours ago

abu abu

1,00321438

1,00321438

• 
  
  
  

  
  

  
  
  
  
  
  

  
  have you included boostrap?
  – richflow
  17 hours ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  also note that in your link it's using version bootstrap 3.3.7 (and for some reason a different version of the JS). In bootstrap 4, navs use the class names 'nav' and 'nav-link' instead: getbootstrap.com/docs/4.0/components/navs
  – richflow
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks @richflow. You got my issue. I am using Bootstrap 4.1.3. I need Bootstrap 4 tabs. Thanks
  – abu abu
  16 hours ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  have you included boostrap?
  – richflow
  17 hours ago
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  also note that in your link it's using version bootstrap 3.3.7 (and for some reason a different version of the JS). In bootstrap 4, navs use the class names 'nav' and 'nav-link' instead: getbootstrap.com/docs/4.0/components/navs
  – richflow
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks @richflow. You got my issue. I am using Bootstrap 4.1.3. I need Bootstrap 4 tabs. Thanks
  – abu abu
  16 hours ago
  

  
  
  
  

have you included boostrap?
– richflow
17 hours ago

have you included boostrap?
– richflow
17 hours ago

1

1

also note that in your link it's using version bootstrap 3.3.7 (and for some reason a different version of the JS). In bootstrap 4, navs use the class names 'nav' and 'nav-link' instead: getbootstrap.com/docs/4.0/components/navs
– richflow
16 hours ago

also note that in your link it's using version bootstrap 3.3.7 (and for some reason a different version of the JS). In bootstrap 4, navs use the class names 'nav' and 'nav-link' instead: getbootstrap.com/docs/4.0/components/navs
– richflow
16 hours ago

Thanks @richflow. You got my issue. I am using Bootstrap 4.1.3. I need Bootstrap 4 tabs. Thanks
– abu abu
16 hours ago

Thanks @richflow. You got my issue. I am using Bootstrap 4.1.3. I need Bootstrap 4 tabs. Thanks
– abu abu
16 hours ago

add a comment | 

2 Answers
2

active

oldest

votes

up vote
1
down vote



accepted

For future reference (this is the comment which resolved @abu abu's issue):

Also note that in your link it's using version bootstrap 3.3.7 (and
for some reason a different version of the JS). In bootstrap 4, navs
use the class names 'nav' and 'nav-link' instead:
getbootstrap.com/docs/4.0/components/navs

Sample from bootstrap site:

 <ul class="nav nav-tabs">

  <li class="nav-item">

    <a class="nav-link active" href="#">Active</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#">Disabled</a>

  </li>

</ul>

share|improve this answer

edited 16 hours ago

answered 16 hours ago

richflow

29118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  how can I connect tab-content?
  – abu abu
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
  – richflow
  16 hours ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

You need to add bootstrap css and js , here is working demo :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

share|improve this answer

answered 17 hours ago

Saurabh Mistry

2,6691726

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371864%2fhtml-tab-using-bootstrap%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote



accepted

For future reference (this is the comment which resolved @abu abu's issue):

Also note that in your link it's using version bootstrap 3.3.7 (and
for some reason a different version of the JS). In bootstrap 4, navs
use the class names 'nav' and 'nav-link' instead:
getbootstrap.com/docs/4.0/components/navs

Sample from bootstrap site:

 <ul class="nav nav-tabs">

  <li class="nav-item">

    <a class="nav-link active" href="#">Active</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#">Disabled</a>

  </li>

</ul>

share|improve this answer

edited 16 hours ago

answered 16 hours ago

richflow

29118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  how can I connect tab-content?
  – abu abu
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
  – richflow
  16 hours ago
  

  
  
  
  

add a comment | 

up vote
1
down vote



accepted

For future reference (this is the comment which resolved @abu abu's issue):

Also note that in your link it's using version bootstrap 3.3.7 (and
for some reason a different version of the JS). In bootstrap 4, navs
use the class names 'nav' and 'nav-link' instead:
getbootstrap.com/docs/4.0/components/navs

Sample from bootstrap site:

 <ul class="nav nav-tabs">

  <li class="nav-item">

    <a class="nav-link active" href="#">Active</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#">Disabled</a>

  </li>

</ul>

share|improve this answer

edited 16 hours ago

answered 16 hours ago

richflow

29118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  how can I connect tab-content?
  – abu abu
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
  – richflow
  16 hours ago
  

  
  
  
  

add a comment | 

up vote
1
down vote



accepted

up vote
1
down vote



accepted

For future reference (this is the comment which resolved @abu abu's issue):

Also note that in your link it's using version bootstrap 3.3.7 (and
for some reason a different version of the JS). In bootstrap 4, navs
use the class names 'nav' and 'nav-link' instead:
getbootstrap.com/docs/4.0/components/navs

Sample from bootstrap site:

 <ul class="nav nav-tabs">

  <li class="nav-item">

    <a class="nav-link active" href="#">Active</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#">Disabled</a>

  </li>

</ul>

share|improve this answer

edited 16 hours ago

answered 16 hours ago

richflow

29118

For future reference (this is the comment which resolved @abu abu's issue):

Also note that in your link it's using version bootstrap 3.3.7 (and
for some reason a different version of the JS). In bootstrap 4, navs
use the class names 'nav' and 'nav-link' instead:
getbootstrap.com/docs/4.0/components/navs

Sample from bootstrap site:

 <ul class="nav nav-tabs">

  <li class="nav-item">

    <a class="nav-link active" href="#">Active</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#">Disabled</a>

  </li>

</ul>

share|improve this answer

edited 16 hours ago

answered 16 hours ago

richflow

29118

share|improve this answer

share|improve this answer

edited 16 hours ago

edited 16 hours ago

edited 16 hours ago

answered 16 hours ago

richflow

29118

answered 16 hours ago

richflow

29118

answered 16 hours ago

richflow

29118

29118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  how can I connect tab-content?
  – abu abu
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
  – richflow
  16 hours ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  how can I connect tab-content?
  – abu abu
  16 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
  – richflow
  16 hours ago
  

  
  
  
  

how can I connect tab-content?
– abu abu
16 hours ago

how can I connect tab-content?
– abu abu
16 hours ago

you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
– richflow
16 hours ago

you'll need to use boostrap js: getbootstrap.com/docs/4.0/components/navs/#javascript-behavior . Basically the nav href should link to an anchor with a matching id.
– richflow
16 hours ago

add a comment | 

up vote
1
down vote

You need to add bootstrap css and js , here is working demo :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

share|improve this answer

answered 17 hours ago

Saurabh Mistry

2,6691726

add a comment | 

up vote
1
down vote

You need to add bootstrap css and js , here is working demo :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

share|improve this answer

answered 17 hours ago

Saurabh Mistry

2,6691726

add a comment | 

up vote
1
down vote

up vote
1
down vote

You need to add bootstrap css and js , here is working demo :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

share|improve this answer

answered 17 hours ago

Saurabh Mistry

2,6691726

You need to add bootstrap css and js , here is working demo :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  



  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>



  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>



</body>

</html>

share|improve this answer

answered 17 hours ago

Saurabh Mistry

2,6691726

share|improve this answer

share|improve this answer

answered 17 hours ago

Saurabh Mistry

2,6691726

answered 17 hours ago

Saurabh Mistry

2,6691726

answered 17 hours ago

Saurabh Mistry

2,6691726

2,6691726

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371864%2fhtml-tab-using-bootstrap%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here