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

enter image description here

Why it is happening like this ?

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

enter image description here

Why it is happening like this ?

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

enter image description here

Why it is happening like this ?

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

enter image description here

Why it is happening like this ?

html tabs bootstrap-4

asked 17 hours ago

abu abu

1,00321438

asked 17 hours ago

abu abu

1,00321438

asked 17 hours ago

abu abu

1,00321438

asked 17 hours ago

abu abu

1,00321438

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 |

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

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 |

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>

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>

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');
});

Post as a guest

Name

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

Required, but never shown

2 Answers
2

active

oldest

votes

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>

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>

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>

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>

edited 16 hours ago

answered 16 hours ago

richflow

29118

edited 16 hours ago

answered 16 hours ago

richflow

29118

answered 16 hours ago

richflow

29118

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 |

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

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>

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>

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>

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>

answered 17 hours ago

Saurabh Mistry

2,6691726

answered 17 hours ago

Saurabh Mistry

2,6691726

answered 17 hours ago

Saurabh Mistry

2,6691726

answered 17 hours ago

Saurabh Mistry

2,6691726

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

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

Search This Blog

Ufyukyu