Right-aligned tabs have an undesired gap to the side - html

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

Related

Horizontal tabs show as vertical at center of page

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?

How to add bootstrap tab menu horizontally [duplicate]

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 */
}

How to reduce bootstrap navbar height?

I want to reduce bootstrap navbar height ,What is the best solution to achieve this task , should i overwrite bootstrap css or any pure css solution ?
main.html
<div class="col-md-10">
<div class="tab-content">
<nav class="navbar navbar-default container-panel">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<li>some other stuff</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
main.css
.navbar.container-panel {
width:250px;
margin-left: 760px;
min-height: 15px;
}
You need to overwrite the Bootstrap CSS.
In your HTML file put the Bootstrap link first then put your link to your css file after. Then you can go about editing the navbar class you want.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="location/filename.css">

Stuck/Sticky side Navigation

How do I get my sidemenu to remain stuck so the navigation tabs always remain on top and don't scroll with the page
How do I get the buttons to change background color on hover?
The issue is that only the text changes background color or only a small portion
THE CODEPEN
<head>
<title>Ã…rhus Gastronomi</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="frontpage" class="content">
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<p>Another item</p>
</div>
<div id="page2" class="content">
<p>This is page 2</p>
</div>
</body>
Add position: fixed; to your #sidebar
You may also want to add this:
.content {margin-left: 10%;}
And restructure your html like so, with the nav outside of the first content section::
<body>
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<div id="frontpage" class="content">.......
This will make it so that your content isn't behind the nav you have.

bootstrap z-index issue with dropdown button in header

I use bootstrap in my website, i create a new dropdown button and I added in the header, my problem is when I click on dropdown that menu is appear under the others elements, I will add here an image to see what is the problem , I think the problem is z-index:
here is my html code:
<div class="page">
<div class="header-container">
<div class="container">
<div class="row">
<div class="header">
<div class="col-md-4 col-md-offset-0">
<div class="dropdown">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.
.wrapper {
overflow: hidden; // Remove
width: 100%;
}
Try it This Code in your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</body>
</html>