I am using a Bootstrap Pill Navigation (Bootstrap 4). Code is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="nav-item"><a id="homeMenu" class="nav-link active" data-toggle="pill" href="#home">HOME</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#about">ABOUT</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact">CONTACT</a></li>
</ul>
<div class="tab-content container-fluid">
<div id="home" class="tab-pane fade show active" style="background-color:yellow">
<h1>Home</h1>
</div>
<div id="about" class="tab-pane fade" style="background-color:red">
<h1>About</h1>
</div>
<div id="contact" class="tab-pane fade" style="background-color:orange">
<h1>Contact</h1>
</div>
</div>
</div>
</body>
</html>
This code works perfectly on localhost. But when it goes live, the links do not redirect to the respective id. Instead, the domain just shows as www.xyz.com/#(id) (when respective links are clicked) and stays on the initial view (which is the home tab). I am a newbie, so not really sure where I have gone wrong! Please help!
Try using a CDN version of jquery and bootstrap, i.e. replace these lines
<link href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
with
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
This is usually caused by Javascript, bootstrap and jquery files not being referenced properly from their respective folders since you are using them locally, make sure they are being targeted properly or use their direct CDN links to reference them.
Possible solutions are:
Add "../" to your script src links
This depends on the level or hierarchy of your folders.
Use the CDN versions of bootsrap files.
Put scripts at the bottom of your page instead of header area.
To create an anchor link you must name the target. You can use plain HTML.
Without href attribute, which indicates the hyperlink, the anchors are not seen as links, but their formatting is indistinguishable from "normal" text.
W3C explanation
So:
This is the link
<a name="home">This is the target</a>
In your case:
<!-- Links -->
<ul class="nav nav-pills">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<!-- Sections -->
<div id="home">
<a name="home"><h1>Home</h1></a>
</div>
<div id="about">
<a name="about"><h1>About</h1></a>
</div>
<div id="contact">
<a name="contact"><h1>Contact</h1></a>
</div>
Try Bootstrap CDN from https://www.bootstrapcdn.com/ for {CSS, JS...} without any hesitation.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Sometimes when we are working on the local machine, we just give a static path based on our OS, but when we deploy the website, the local development OS and Deployment OS differs from each other sometimes. So if we use CDN then the problem will solve with ease.
Easiest Solution is using a CDN (Manual approach also)
You can just plug the below snippet, and it should be working for you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container-fluid py-2">
<ul class="nav nav-pills">
<li class="nav-item mr-2"><a id="homeMenu" class="nav-link active bg-primary text-white" data-toggle="pill" href="#home">HOME</a></li>
<li class="nav-item mr-2"><a class="nav-link bg-danger text-white" data-toggle="pill" href="#about">ABOUT</a></li>
<li class="nav-item mr-2"><a class="nav-link bg-warning text-white" data-toggle="pill" href="#contact">CONTACT</a></li>
</ul>
<div class="tab-content mt-2">
<div id="home" class="tab-pane fade show active bg-primary my-5 p-5">
<h1>Home</h1>
</div>
<div id="about" class="tab-pane fade bg-danger my-5 p-5">
<h1>About</h1>
</div>
<div id="contact" class="tab-pane fade bg-warning my-5 p-5">
<h1>Contact</h1>
</div>
</div>
</div>
</body>
</html>
You may try out this snippet directly from here JSFiddle Link
If you still wish to use relative paths:
Manual Approach (In Windows):
Create a folder called as libraries in the same directory as your index.html with the above code
Download the files using this link. Unzip it
Copy the bootstrap.min.css file from bootstrap-4.5.2-dist\css to the libraries directory
Copy the bootstrap.bundle.min.js from bootstrap-4.1.3-dist\js to the libraries directory
Download jquery files using this link. Copy the contents into a jquery-3.5.1.min.js file in the libraries directory
Update the HTML code as below:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./libraries/bootstrap.min.css">
<script src="./libraries/jquery-3.5.1.min.js"></script>
<script src="./libraries/bootstrap.bundle.min.js"></script></script>
</head>
PS: I know it is verbose, but just to be absolutely certain!
Related
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 1 year ago.
I want to ask a question about ms-auto in Bootstrap 5.
I am trying to create a navbar with margin-start having a property of auto via ms-auto in the Bootstrap 5 documentation.
So far, my code appears as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Frontend Bootcamp</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
What You'll Learn
</li>
<li class="navbar-item">
Questions
</li>
<li class="navbar-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
What I am expecting with ms-auto is as follows:
But what I am actually rendering in the output is this:
I am struggling to understand why ms-auto does not work here with the ui element. I thought that the list of items would shift to the far right, but it has not done so as per the desired result.
Why is my list not responding to ms-auto? Is there an incompatibility or an error in my code?
This source code was derived from a tutorial taken here.
try to add w-100 with the parent and use mx-auto instead ms-auto
I was using the CDN for Bootstrap 4, which I mistakenly accessed on the mainpage.
Using the Bootstrap 5 CDN and JS bundle resolved this matter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Frontend Bootcamp</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
What You'll Learn
</li>
<li class="navbar-item">
Questions
</li>
<li class="navbar-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I am a complete beginner at html and I'm trying to follow along with bootstrap but it appears there is something fundamental that I am overlooking. My code will make the tabs but I cannot get it to switch between the two tabs.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Welcome to website</title>
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Data
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<p>this is the home tab</p>
</div>
<div class="tab-pane fade" id="data">
<p>this is the data tab</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Seems to be just a naming issue.
Data
should be
Data
since the second tab's id is "data", not "profile".
So I have this code below.
Using Bootstrap I would like to have this drop down on the left in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
<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" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav;">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Using Bootstrap I would like to have this drop down that is currently on the left... in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
Setting the left and right margin to auto might work. Try this! mx-auto - says margin on the x-axis (ie., left and right) is set to auto!
<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" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav;">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Hope this helps!
Bootstrap includes a flexbox grid system for building layouts. It’s based on a 12 column layout and has multiple tiers. It is basically a css class like any other. Bootstrap comes with these classes predefined.
For example:
<div class="col-lg-12">
This would take up all available screen space
</div>
Then all you have to do is center your content and you will end up with a div that takes up the area you want with content that is centered inside it.
The lg in this example stands for a large area, but there are several of these. They can be used in pairs to change the grid based on the available screen area. These col types are predefined and can be easily referenced.
Using this grid system is going to make whatever you create responsive. It is a joy to work with. I recommend you check it out.
Why wont this work? I am sure i have set it up correctly although this is my first time using bootstrap. I am trying to use CDN distribution but I cant seem to get it to work. It currently just displays them as links as oppose to the nav bar that can be seen when used on other sites.
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Fictional Football Club</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav navbar-nav">
<ul>
<li>News</li>
<li>Matches</li>
<li>Table</li>
<li>Squad</li>
<li>Tickets</li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
The navbar structure is not Bootstrap 4. Read the Bootstrap 4 navbar docs. Bootstrap 4 is now beta.
https://www.codeply.com/go/4GM7ligFGu
<nav class="navbar navbar-light bg-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">News</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Squad</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Tickets</a>
</li>
</ul>
</nav>
I designed a markup and i'm trying to make a tab on bootsrap with jquery. I wrote markup code as below. Please examine why the tabs are not working? What wrong with my code.
in javascript console it showing
ReferenceError: $ is not defined
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Just Live 24</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/tv-theme.css">
<link href="css/main_pricetable.css" rel="stylesheet">
</head>
<body>
<div class="col-md-6">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
<div class="tab-pane" id="profile">.werewr..</div>
<div class="tab-pane" id="messages">.jkhk..</div>
<div class="tab-pane" id="settings">llkjlk...</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})</script>
</div>
<hr>
</body>
</html>
Most probably you forgot to attach http in script src attribute.
src="http://code.jquery.com/jquery-1.11.0.min.js"
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
As a result browser is unable to fetch scripts and is not recogizing jquery shorthand (i.e. $).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Tabs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="col-md-6">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
</ul>
</div>
<div class="tab-content" style="margin-left:20px;">
<div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
<div class="tab-pane" id="profile">.werewr..</div>
<div class="tab-pane" id="messages">.jkhk..</div>
<div class="tab-pane" id="settings">llkjlk...</div>
</div>
</div>
<hr>
</body>
</html>
http://jsfiddle.net/7r6kgooh/