in my Angular2 project I am using this navbar: http://bootsnipp.com/snippets/2qgMx
I removed the second nav and transferred some <link> and <script>-tags into my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<title>Relax mal wieder</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Here is my app-root-html --> please refer <app-root>Loading...</app-root> in index.html:
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse animated fadeIn" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav animated fadeIn text16">
<li class="active"><span class="glyphicon glyphicon-cog"></span></li>
<li><span class="glyphicon glyphicon-download-alt"></span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-usd"></span>Pay Something<span class="caret"></span>
<ul class="dropdown-menu animated flipInX" role="menu">
<li><span class="glyphicon glyphicon-list-alt"></span>PayOptOne Web</li>
<li><span class="glyphicon glyphicon-road"></span>PayOptTwo Web</li>
<li><span class="glyphicon glyphicon-barcode"></span>PayOptTree Web</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span><b> Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
<!-- Login -->
<div class="social-buttons">
<div class="iconSpecial"><i class="glyphicon glyphicon-user"></i>Login</div>
</div>
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">login</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Entrar Usuário" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Senha</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Esquecí minha senha ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Entrar</button>
</div>
<div class="checkbox text-dark">
<label>
<input type="checkbox"> Manter-me Logado
</label>
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The code snipped works fine, but for some reason the text in my opened combobox is white so I can't read the text. Only hovering over the subitems makes the text visible.
Problem in chrome and firefox and ie.
Hope you can help me. Thx in advance.
Related
Code:
<!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 -->
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--custom css-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<h1>Welcome to Bootstrap 4.0 !</h1>
<p>This is the platform that was created by twitter and is used in every website today</p>
<form action="" class="form-inline">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control
form-control-lg" placeholder="Tanveer">
</div>
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control
form-control-lg" placeholder="tanveer#example.com ">
</div>
<button type="submit" class="btn btn-success btn-lg">Submit</button>
</form>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-full"
id="nav-main"> <a class="navbar-brand" href="#">Bootstrap 4.0</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </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.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js""></script>
</body>
</html>
One vary basic and simple way to change a html tag to be in the center is to use align attribute:
<form align="center">
This sentence will be in the center!
</div>
Please try and change this code:
<form action="" class="form-inline" >
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
To:
<form action="" class="form-inline" align="center">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
Another way is to add the "text-align: center;" in your CSS file.
You can use below CSS to align form in the center with content.
form {
display: block;
margin: 0 auto;
text-align: center;
}
I am developing a website and testing it on my iPhone for mobile view. still on bootstrap 3. It having some issue. when tap on the nav button on my iPhone nothing happened no dropdown list. and when on desktop it work with mouse click. on top of that I use JS to load this page to the index.jsp. Thanks.
$(document).ready(function () {
console.log("testing");
$('#header').load('jsp/Header.jsp');
$('#footer').load('jsp/Footer.jsp');});
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>nav</title>
</head>
<body>
<div class="col-sm-2" id="nav">
<sec:authorize access="hasRole('ROLE_USER')">
<a class="dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown">☰
<span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdown">
<li>
<div class="col-sm-2 align-top " id="home">
<span class="glyphicon glyphicon-home"></span>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="home">
About Us
</div>
</li>
<li> <div class="col-sm-2 align-top " id="news">
News
</div></li>
<li><div class="col-sm-2 align-top " id="blog">
Posts
</div></li>
<li>
<div class="col-sm-2 align-top " id="home">
sign up
</div>
</li>
<li> <div class="col-sm-2 align-top " id="log-in">
Sign In
</div></a></li>
</ul>
</sec:authorize>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/Home.js"></script>
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${pageContext.request.contextPath}/">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<sec:authorize access="hasRole('ROLE_USER')">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</sec:authorize>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>
You should use your js and jQuery in the head section like that:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>nav</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/Home.js"></script>
</head>
<body>
<div class="col-sm-2" id="nav">
<sec:authorize access="hasRole('ROLE_USER')">
<a class="dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown">☰
<span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdown">
<li>
<div class="col-sm-2 align-top " id="home">
<span class="glyphicon glyphicon-home"></span>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="home">
About Us
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="news">
News
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="blog">
Posts
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="home">
sign up
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="log-in">
Sign In
</div>
</a>
</li>
</ul>
</sec:authorize>
</div>
Because I have faced the same problem many times so hope it works.
When I shrink the page the navbar reduces in size appropriately, but the nav collapse button doesn't work. I can't see anything wrong with my code.
Why would this code work here or on JSFiddle, but not on a local machine using either IE or Chrome?
(JSFiddle)
<html>
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>My Library <small>A library for people who like libraries.</small>
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul style="width: 100%" class="nav navbar-nav navigationList">
<li id="homeListItem" class="active">
Home
</li>
<li id="libraryListItem">
Library
</li>
<li id="aboutUsListItem">
About Us
</li>
<li id="contactListItem">
Contact
</li>
<li id="loginListItem">
Login
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
Looks like a misspell of "scripts/boostrap.js" which should be "scripts/bootstrap.js".
I am unable to get the mobile dropdown working on this navbar, I have all the files required but still it wont allow any items to drop down (in mobile view?)
Is there something I am missing that I cannot see
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/" style="background-color: lightgrey;">Site</a>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>Site
</li>
<li>Rules
</li>
<li>Results
</li>
<li>Contact
</li>
<li>Request Account
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Sign In</button>
</form>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<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://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
</head>
<body>
#include('layouts.header')
#include('layouts.footer')
</body>
</html>
You're just missing the # in your data-target value. CodePen
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
My nav bar in Bootstrap does not come down when the screen gets too small. On mobile, for example, it doesn't work unless the phone is in landscape mode. Here is my code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
I'm not too familiar with Bootstrap, so I can't tell if there's something glaringly obvious I'm doing wrong. Is there any reason why the collapse button would not drop-down after the screen gets too small?
<!DOCTYPE html>
<html lang="en">
<head>
<title> My site! </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
<script src="js/index.js"></script>
<!-- Typing effect on homepage is in js/typed.js -->
<script src="js/typed.js"></script>
<link rel="stylessheet" type="text/css" href="bootstrap-social-gh-pages/bootstrap-social.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center push-center" >
<div style="background:transparent !important" class="jumbotron">
<h1 id="main">Hi there</h1>
<p> <i class="fa fa-globe" aria-hidden="true"></i> <span class="element"></span> </p>
<p> <i class="fa fa-briefcase" aria-hidden="true"></i> <span class="element1"></span> </p>
<p> <span class="element2"> </span> <span class="rest"></span> </p>
</div>
</div>
</body>
</html>