This is the same problem as https://github.com/twitter/bootstrap/issues/3287 (see image) but I don't understand the solution!
I have the following HTML:
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"</span></button>
<ul class="dropdown-menu">
<li> Action 1</li>
<li> Action 2</li>
<li> Action 2</li></ul></div></div>
</ul>
</div>
</div>
which should make a table with a button that can be clicked to reveal some dropdown options from the button.
Many thanks :).
This works for me
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="includes/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<table class="table">
<tbody>
<tr><td>some stuff</td><td>some more stuff</td></tr>
<tr>
<td>here's something</td>
<td>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> Action 1</li>
<li> Action 2</li>
<li> Action 2</li></ul></div></div>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>another row</td>
<td>with more stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Related
Im working with Spring Boot and Thymeleaf as simple front end. Im very low in front end and i know just basics about thymleaf and html/css. I build simple forum where after login, user got few pages like, add topic, find topic, topic list, add inscription, edit inscription etc. I want to have this same navbar for every page. On this moment i just copy still this same html code and paste to every file, but what if i want to change one option?Yeees i know, i will have to change on every file. How can i fix it and put one navbar with this options to every page after login? I add for example my index.
<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link th:href="#{/main.css}" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #969bd9;">
<span class="navbar-brand">Home Page</span>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="isAuthenticated()"><a th:href="#{/logout}">Logout</a></li>
</ul>
<ul class="nav navbar-nav">
<li sec:authorize="isAuthenticated()"><a th:href="#{/topic/all}"><n1>Topics</n1></a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Welcome <span sec:authentication="principal.username"> </span></h1>
</div>
<div class="container my-2">
<a th:href="#{/newTopic}" class="btn btn-success">Create new topic</a>
</div>
<div class="container my-3">
<a th:href="#{/topic/search}" class="btn btn-success">Find topic</a>
</div>
<div align="center" class="container my-2">
<h3>Last activity</h3>
<table border="1" style="width:800px" class="table table-bordered table-striped">
<thead>
<tr>
<th>Topic name</th>
<th>Date activity</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<tr th:each="inscription : ${newInscriptionList}">
<td>
<a th:href="#{/topic/{id}(id = ${inscription.topic.id})}" th:text="${inscription.topic.title}"></a>
</td>
<td th:width="200" th:text="${#dates.format(inscription.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
<td th:width="200" th:text="${inscription.user.login}"></td>
</tr>
</tbody>
</table>
</div>
<div align="center" class="container my-2">
<h3>New Topics</h3>
<table border="1" style="width:800px" class="table table-bordered table-striped">
<thead>
<tr>
<th>Topic name</th>
<th>Created</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<tr th:each="topic : ${newTopicList}">
<td>
<a th:href="#{/topic/{id}(id = ${topic.id})}" th:text="${topic.title}"></a>
</td>
<td th:width="200" th:text="${#dates.format(topic.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
<td th:width="200" th:text="${topic.user.login}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So for example i want to get this nav bar to every page.
<nav class="navbar navbar-light" style="background-color: #969bd9;">
<span class="navbar-brand">Home Page</span>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="isAuthenticated()"><a th:href="#{/logout}">Logout</a></li>
</ul>
<ul class="nav navbar-nav">
<li sec:authorize="isAuthenticated()"><a th:href="#{/topic/all}"><n1>Topics</n1></a></li>
</ul>
</div>
</nav>
The answer is yes. You can simply do this with Thymleaf.
At first, make a file called navbar.html
Then insert your navbar code in there like this
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>NavigationBar</title>
</head>
<body>
<nav th:fragment="navbar" class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" th:href="#{/}">Student Management System</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" th:href="#{/student}">Student List</a></li>
<li><a class="nav-link" th:href="#{/subjects}">Subjects</a></li>
<li><a class="nav-link" th:href="#{/teachers}">Teachers</a></li>
</ul>
</div>
</nav>
</body>
</html>
Then whenever you want, you can simply use it as follows. Use the following format for that in the div element.
th:insert="File_Name : : Fragment_Name"
You can get a better understanding from the following example.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Create New Student</title>
<link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>
<body>
<div th:insert="navbar :: navbar"> </div>
<div>
<h1> Student Form </h1>
</div>
</body>
</html>
I'm unable to get a custom CSS sheet to work in the navigation bar. I've an angular application, where I'm adding a CSS file to override the anchor tag colors inside the navbar. Since the freelancer css files I'm using have made the anchor tag white in color, and there's a place in the Nav bar HTML, where I want to use anchor tag in a readable color, I've written custom CSS file.
<!DOCTYPE html>
<html ng-app="jargoViewer">
<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>Jargo Foods Pvt Ltd.</title>
<link href="vendor/font-awesome/css/style.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Jargo CSS Styles -->
<link href="css/jargo.css" rel="stylesheet" type="text/css">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-cookies.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery.easing/js/jquery.easing.min.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<script src="js/freelancer.min.js"></script>
<script src="app.js"></script>
<script src="RestService.js"></script>
<script src="UserCart.js"></script>
<script src="ProdSearchService.js"></script>
<script src="ProductsSearchController.js"></script>
<script src="MainController.js"></script>
<script src="ProductController.js"></script>
<script src="NavController.js"></script>
<script src="CheckoutController.js"></script>
<script src="PaymentController.js"></script>
<script src="LoginModal.js"></script>
<script src="LoginModalCtrl.js"></script>
<script src="LoginService.js"></script>
<script src="CheckoutPaymentService.js"></script>
<script src="OrdersController.js"></script>
<script src="SessionInterceptor.js"></script>
<!-- Payment Gateway Lib -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body id="page-top" class="index">
<div id="skipnav">Skip to main content</div>
<!-- Add the Navigation Bar on top -->
<div ng-include="'nav.html'"></div>
<!-- This is where the Actual Content would go -->
<div ng-view autoscroll="true"></div>
<!-- Add the footer at bottom -->
<div ng-include="'footer.html'"></div>
</body>
</html>
My CSS file is as follows (jargo.css). Notice the use of a new class called cart-table-link:
.cart-table-link a{
color: #FF8B03 !important;
}
.cart-table-link li a{
color: #FF8B03;
}
.cart-table-link li a:hover{
color: #18BC9C;
}
.cart-table-link li a:focus,
.cart-table-link li a:active{
color: #FF8B03;
}
.cart-table-link li.active a{
color: #FF8B03;
background: #18BC9C;
}
.cart-table-link li.active a:hover,
.cart-table-link li.active a:focus,
.cart-table-link li.active a:active{
color: #FF8B03;
background: #18BC9C;
}
My portion of nav.html, which contains a DropDown "Cart" Nav Element, which when clicked opens a Table with row entries for each product in the Cart, and finally, at the end, a "View Cart" and a "Checkout" anchor element. Each row entry in the Cart table contains an anchor tag with name of the Product Item, which if clicked should take user to the Product details page. Below is nav.html:
<!-- Navigation -->
<!--<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom"> -->
<nav id="mainNav" class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container-fluid" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Jargo Foods</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden">
</li>
<li class="page-scroll">
Products
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<!-- Search Starts -->
<li>
<!--
<div class="col-sm-3 col-md-3 pull-right">
-->
<div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" ng-model = "searchtext" class="form-control" placeholder="Search" name="srch-term" id="srch-term"/>
<div class="input-group-btn">
<button ng-click = "search()" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</li>
<!-- Cart Starts -->
<!--<div class="navbar-brand navbar-right">-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cart
<span id="cart-total" ng-show ="userCart.cart_size">{{userCart.cart_size}} item(s)</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!--
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="obj in userCart.cart_prod_ids">{{obj}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>
-->
<li>
<!--
<table class="table table-striped hcart">
-->
<table>
<tbody>
<tr ng-repeat="(id, itemObj) in userCart.cart_products">
<td class="text-center">
<a ng-href="#/product/{{itemObj.ID}}">
<img src="img/others/cart.png" alt="image" title="image" class="img-thumbnail img-responsive"/>
</a>
</td>
<td class="text-left" class="col-md-2">
<a class="cart-table-link" ng-href="#/product/{{itemObj.ID}}">{{itemObj.ItemName}}</a>
</td>
<td class="text-right">x {{itemObj.Quantity}}</td>
<td class="text-right">₹ {{itemObj.Quantity * itemObj.CostPerUnit}}</td>
<td class="text-center">
<i class="fa fa-times" ng-click = "remInCart(itemObj.ID, 1)" ></i>
</td>
</tr >
</tbody>
</table>
</li>
<li>
<table class="table table-bordered total">
<tbody>
<tr>
<td class="text-right"><strong>Sub-Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val}}</td>
</tr>
<tr>
<td class="text-right"><strong>VAT (5.5%)</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 0.055 | number:2}}</td>
</tr>
<tr>
<td class="text-right"><strong>Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 1.055 | number:2}}</td>
</tr>
</tbody>
</table>
</li>
<li>
<p class="text-right btn-block1">
View Cart
<a class = "button cart-table-link" href="#/checkout">Checkout</a>
</p>
</li>
</ul>
</div>
</ul>
</li>
</div> <!-- /.navbar-collapse -->
</nav> <!-- /.container-fluid -->
Just search for the reference to the cart-table-link in the nav.html file.
Despite the above changes, the cart-table-link CSS is most likely not even recognized. Notice the image (chrome inspection)
Any clue where I'm going wrong?
Your CSS is not correct.
The class cart-table-link is the a element.
a.cart-table-link {
color: #FF8B03;
}
I removed also the !important because having a.cart-table-link will have more hierarchy than the other styles that I saw.
On mobile (iOS using Safari and Google Chrome), lightly tapping without clicking a navbar item changes its color from gray to black (the behavior you get with :hover on desktop). This only happens with some of the items, however, and only if navbar-fixed-top is used. After searching in vain, I found a related issue, but unfortunately it was not addressed.
Removing the padding is not an option since doing so will render certain elements invisible. I would also like to avoid using navbar-static-top.
How should I go about this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<style>
body {
padding-top:50px;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Site</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Hover Broken #1</li>
<li>Hover Broken #2</li>
<li>Hover OK</li>
<li>Hover OK</li>
<li>Hover Broken #3</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top:25px;">
<div class="row" style="margin-left: 0px; margin-right: 0px;">
<div class="pull-right">
<label>
<div style="display:inline-block">Option: </div>
<div style="display:inline-block">
<select class="btn-sm btn-default" id="page_rows" style="cursor: pointer">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</div>
</label>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href=""><span class="badge">Count</span></a>
</li>
</ul>
<div class="table-responsive text-center">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
JSFiddle: https://jsfiddle.net/55acd3ex/
:hover wouldn't work on a mobile as your screen im guessing would have to sense when the users finger is hovering over the screen before the tapped on screen and i don't think any mobile phone currently has such magic :)
as for the navbar-fixed-top just remove it and everything should be ok
Looks like there is an official "answer" after all:
Even though real hovering isn't possible on most touchscreens, most
mobile browsers emulate hovering support and make :hover "sticky". In
other words, :hover styles start applying after tapping an element and
only stop applying after the user taps some other element. This can
cause Bootstrap's :hover states to become undesirably "stuck" on such
browsers. Some mobile browsers also make :focus similarly sticky.
There is currently no simple workaround for these issues other than
removing such styles entirely.
I am using bootstrap in codeine.io. I have moved the <h1> tag to the body section and then it appears but I want it in a div so I can center it to the middle of the page. What am I doing wrong?
<body>
<script src="https://use.fontawesome.com/4880cded54.js"></script>
<header>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
</header>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<a href="#" class="back_down" style="display: inline;">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>
</body>
<div>
<ul class = "nav nav-pills">
<li class = "pull-right">
About Me
</li>
<li class ="pull-right">
Portfolio
</li>
<li class = "pull-right">
Get In Touch
</li>
</ul>
<div class = "pageOne">
<div class="block text-center">
<h1>Birth of A Method</h1>
</div>
</div>
<div class ="btnList">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Facebook</a>
</div>
Please research proper html structure.
Should be:
<html>
<head>
<!--All of your links and styles-->
</head>
<body>
<!--All of your content-->
</body>
</html>
Your html code in invalid. Try this:
<!doctype html>
<html>
<head>
<script src="https://use.fontawesome.com/4880cded54.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
</head>
<body>
<a href="#" class="back_down" style="display: inline;">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>
<div>
<ul class = "nav nav-pills">
<li class = "pull-right">
About Me
</li>
<li class ="pull-right">
Portfolio
</li>
<li class = "pull-right">
Get In Touch
</li>
</ul>
<div class = "pageOne">
<div class="block text-center">
<h1>Birth of A Method</h1>
</div>
</div>
<div class ="btnList">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Facebook</a>
</div>
</div>
</body>
</html>
You end your body before you even put anything in it.
Also you put your header inside of your body...
Try this structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
All of your inputs and meta information will go between the header tags, and everything else should go between the body tags. You won't really need to worry about html for what you are doing.
The answer is pretty simple: move all your main HTML inside the body tag. And you also used header instead of head tag for your links. Your code should looks like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
</head>
<body>
<div>
<ul class = "nav nav-pills">
<li class = "pull-right">
About Me
</li>
<li class ="pull-right">
Portfolio
</li>
<li class = "pull-right">
Get In Touch
</li>
</ul>
<div class = "pageOne">
<div class="block text-center">
<h1>Birth of A Method</h1>
</div>
</div>
</div>
<div class ="btnList">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Facebook</a>
</div>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src="https://use.fontawesome.com/4880cded54.js"></script>
</body>
</html>
Cheers
I am trying to achieve this
Using the code from bootstrap examples I do it like this
<body>
<!-- create character component -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<!-- creation step component -->
<div class="card">
<!-- header -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Character
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</h5>
</div>
But I simply can't add icon to the header. Whether I use it in or out a tag it simply shows empty header without arrow.
What is the problem?
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- create character component -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<!-- creation step component -->
<div class="card">
<!-- header -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Character
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</h5>
</div>
<!-- configurable items -->
<div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<table>
<tr>
<td>Name</td>
<td>
<input id="playerName">
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Age</td>
<td>
<input id="playerAge">
<td>
</tr>
<tr>
<td>Race</td>
<td>
<select id="races">
<option>Human</option>
<option>Elf</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<h3>Character attributes</h3>
<table>
<tr><td colspan="2" align="center">Magical traits</td></tr>
<tr>
<td>Fire affinity</td>
<td><input id="fireAffinity"></td>
</tr>
<tr>
<td>Earth affinity</td>
<td><input id="earthAffinity"></td>
</tr>
<tr>
<td>Water affinity</td>
<td><input id="waterAffinity"></td>
</tr>
<tr>
<td>Wind affinity</td>
<td><input id="windAffinity"></td>
</tr>
<tr>
<td>Lighting affinity</td>
<td><input id="lightingAffinity"></td>
</tr>
<tr><td colspan="2" align="center">Physical traits</td></tr>
<tr>
<td>Power</td>
<td><input id="physicalPower"></td>
</tr>
<tr>
<td>Vitality</td>
<td><input id="physicalVitality"></td>
</tr>
<tr><td colspan="2" align="center">Mental traits</td></tr>
</table>
<h3>Unique traits</h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>