I am using Bootstrap 5 in an ASP.NET Core 6 MVC app. I have added these references in my _layout.cshtml:
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
I need to make horizontal tabs in my child page i.e index.cshtml. I am using this markup:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Java</li>
<li>C#</li>
<li>MySQL</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">home tab</div>
<div class="tab-pane" id="javatab">Java tab </div>
<div class="tab-pane" id="csharptab">C# tab</div>
<div class="tab-pane" id="mysqltab">MySQL tab</div>
</div>
</div>
But I get vertical tabs in the center of the page instead of horizontal tabs at the top of the page. Am I missing anything here?
Related
This question already has answers here:
Bootstrap horizontal drop down
(5 answers)
How to display dropdown menu items of bootstrap navbar in a horizontal manner rather than vertical?
(1 answer)
Closed 8 months ago.
I have used below code to get bootstrap tabs. I get the output as below:
Can I use above same code to get a horizontal tab list after click web instead of vertical menu? I need output as below:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Java</li>
<li>C#</li>
<li>MySQL</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
Do I need some more libraries to do this? Is this existing method(which can get from the library) is limited to that type of output only
Simply add this css code:
.open>.dropdown-menu {
display: flex !important; /* Use "important" if your css code before bootstrap lib loaded */
}
I am trying to make my navigation bar clickable. For example when a user clicks data a data web page opens up. But in my code I am unable to do so. When I click the tab button nothing happens. Can someone help me so that when I click the tab button shows the content? Note I am using bootstrap nav-nav tab bar Below is my code below:-
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sales</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="persons/data.html"> data </a></li>
<li><a data-toggle="tab" href="teams/teamI.html"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can make it simpler like below. But if you wanted to load another html into specific tabs then use jquery.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
Update: You can also add html inside your tabs using jQuery load
function.
Code looks like this:
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
<script>
$('#home').load('/home.html');
$('#data').load('/data.html');
$('#teams').load('/teams.html');
</script>
My tabpanel seems to be linked properly to my tab-content, however it does not show the tab-content when I change tabs. How can I fix this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">Customers</li>
<li role="presentation">Sales</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="cust">
This option is for those who want to work with angular offline, or those who want to host the angular files on their own servers.
</div>
<div role="tabpanel" class="tab-pane" id="sales">
lkjdlkfjlkdlkfj ldjfldjfljdlkdjf ljlkdjlkjlkdjf
</div>
</div>
</div>
I have some problems:
I have a tab-div - you can find the code here: http://pastebin.com/KPpgEBi6. As you can see in this http://i.stack.imgur.com/U2MUn.png where the arrows point, there is some space, the tab doesn't start at the right corner, how can I fix it?
There is also some underline that continues behind the content div.
What to do?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container" style="width: 45%;float: right;">
<ul class="nav nav-tabs navbar-right">
<li><a data-toggle="tab" href="#sub_cats_{CID}">{SUB_CATEGORIES}</a></li>
<li class="active"><a data-toggle="tab" href="#category_{CID}">{CATEGORY}</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
<div id="category_{CID}" class="tab-pane fade in active category" style="background-image: url('{CATEGORY_IMAGE}');">
<h1> {CATEGORY_NAME} </h1>
</div>
<div id="sub_cats_{CID}" class="tab-pane fade">
<ul class="sub_categories">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
</div>
You really don't want to be applying inline styles to primary grid elements like that. Work with your framework, not against it.
The fix here seems to be to align your tabs right:
<div class="container">
<ul class="nav nav-tabs navbar-right pull-right">
Demo
Update: The issue is your application of RTL across the site. Reverse it for the nav tabs:
.nav-tabs {
direction: ltr;
}
Demo 2
I am using nav-pills from bootstrap 3 to display my image banner on the corresponding tab. I want to have an unordered list on the "#contact-us" (Corporate, americas/caribbean, africa/middle east, europe, asia/australia) on top of the banner image and have both the text and image to be responsive. I can get the list on top of the image, but once I shrink the browser the list would run out of the banner image.
What do I need to do in my css so that my text would stay within the banner even when i am shrinking the image?
Below is my html.
Thanks in advance!
<div class="banner-tabs">
<div class="container">
<ul class="nav nav-pills tab-titles" id="pills-first">
<li>About Us</li>
<li>Careers</li>
<li class="active">Contact Us</li>
</ul> <!-- nav nav-pills -->
</div> <!-- container -->
<!-- Content -->
<div class="tab-content">
<div class="tab-pane" id="about-us">
<img src="../images/delete-1.png" class="tab-banner" />
</div> <!-- about us -->
<div class="tab-pane" id="careers">
<img src="../images/delete-2.png" class="tab-banner" />
</div> <!-- careers -->
<div class="tab-pane active" id="contact-us">
<img src="../images/delete-1.png" class="tab-banner">
<div class="continents">
<p>Click to view:</p>
<ul>
<li id="corporate"><a>Corporate</a></li>
<li id="americas-caribbean"><a>Americas/Caribbean</a></li>
<li id="africa-middle-east"><a>Africa/Middle East</a></li>
<li id="europe"><a>Europe</a></li>
<li id="asia-australia"><a>Asia/Australia</a></li>
</ul>
</div> <!-- continents -->
</div>
</div> <!-- row -->
</div> <!-- corporate-content -->
perhaps you can provide something like a codepen example ?
Use this as a base : http://codepen.io/alogonzac/pen/vOKELp
<div class="banner-tabs">...</div>