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 */
}
Related
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?
I have installed bootstrap 3 in my angular 4 project using the npm installer. I have a basic site done up and am trying to get an dynamic sideNav bar that will toggle in and out.
I have seen some examples online however they do not seem to work whether it be a newer version of bootstrap or compatibility issues with angular.
Does anyone have any recommendations for a navigation bar that I could use in this instance?
The HTML in my app.component.html:
<!-- Sidebar -->
<script src="src/Javascript/sidebar.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Events
</li>
<li>
Team
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Works <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
First You need to Import bootstrap 3 or Use Bootstrap 3 CDN
Then Instead of using JQuery Use Directive to manipulate Class and Style of Side Bar
I Have Created Stack blitz for same side Bar without using JQuery Check this: https://stackblitz.com/edit/angular-z6hrob
You are probably missing following JS Libraries in your code, add these in your index.html near end of <body> tag:
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></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>