I'm new to bootstrap & its glyphicons are not working for me. After I've inspect the code, font-family of glyphicon-user was "Helvetica Neue",Helvetica,Arial,sans-serif & not Glyphicons Halflings. Am I missing something or do i need to change the css file.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
</body>
</html>
You need to add the class glyphicon.
So your span should actually be:
<span class="glyphicon glyphicon-user"></span>
As shown in the documentation: http://getbootstrap.com/components/#glyphicons-how-to-use
It's not enough to name the glyph, you have to use the class glyphicon too.
<span class="glyphicon glyphicon-user"></span>
Also, beware if you are using this in Opera mobile emulator. It doesn't support these fonts properly so you'll get a blank square.
Follow the steps to work Glyphicons icons in your boostrap project:
add fonts folder to your project from recently downloaded from http://getbootstrap.com and below code for sample
<span class="glyphicon glyphicon-user"></span>
Thanks!
Related
I was trying to create a login form inside a modal like shown here (https://codepen.io/skcals/pen/bxdpaN).
However when I put this same code on my own website here is how it renders :
Has some one ever met the same issue ? And knows how to solve it ?
This is my html head were materialize css is included :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
And this is the code of my login form
<div id="login-modal" class="modal">
<h5 class="modal-close" style="color:black;">✕</h5>
<div class="modal-content center">
<h4>Se connecter</h4>
<br>
<form action="#">
<div class="input-field">
<i class="material-icons prefix">person</i>
<input type="text" id="name">
<label for="name">Username</label>
</div>
<br>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input type="password" id="pass">
<label for="pass">Password</label>
</div>
<br>
<div class="left" style="margin-left:20px;">
<input type="checkbox" id="check">
<label for="check">Remember Me</label>
</div>
<br>
<input type="submit" value="Login" class="btn btn-large login-btn">
</form>
</div>
</div>
I used your code in my project and it worked fine!
The only thing I can think off is using the newest version of JQuery:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
In the meantime, I've solved my own issue by moving the login div somewhere else. Previously it was inside my navbar menu and I think that is was causing the display issue.
There is just one last thing, the remember me check box doesn't show up ...
I open my localhost app in
Chrome - working perfectly
Edge - working but some css not supported
Mozilla Firefox version 53.0.3 (32-bit) - White screen.
Now why it's become white screen on Mozilla? Any ideas? Here is my codes:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://localhost:2001/assets/material.indigo-pink.min.css">
<script src="http://localhost:2001/assets/material.min.js"></script>
<style>
.remove-padding{
padding:0px;
}
</style>
<title>Population</title>
</head>
<body>
<dialog class="mdl-dialog remove-padding">
<div class="mdl-card mdl-shadow--6dp">
<form method="post" action="http://localhost:2001/login/process">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text">Login</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" required id="email" name="email" value="" />
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" required id="userpass" name="password" />
<label class="mdl-textfield__label" for="userpass">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border" style="text-align: right;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Sign In
</button>
</div>
</form>
</div>
</dialog>
<script>
var dialog = document.querySelector('dialog');
dialog.showModal();
</script>
</body>
</html>
I've just started working with Bootstrap.
I need a form like this: https://i.stack.imgur.com/PVPEy.png
Here's my page code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/bundles/styles")
<title>Webstite Evaluation Tool</title>
</head>
<body>
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
Bundles:
bundles.Add(new StyleBundle("~/bundles/styles").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/bootstrap-theme.css",
"~/Content/bars.css"
));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"
));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-3.1.1.js"
));
All I have in result is this: https://i.stack.imgur.com/BNXXu.png
What should I do to fix this? It seems not all styles loaded, but in the source code I see everything from bundles.
Have a look at button addons in the Bootstrap Docs. e.g.
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-3 -->
</div><!-- /.row -->
Example at Bootply
I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.
i have a problem with difference in render html between IE9 and Chrome.
I reviewed all urls of .js and .css and are fine. All files were downloaded from the official website.
This pic is from IE9
This pic is from Chrome
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="public/assets/ico/favicon.png" />
<title>SMG</title>
<!-- Bootstrap core CSS -->
<link href="public/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<link href="public/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="public/assets/js/html5shiv.js"></script>
<script src="public/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">SMG</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="dni" data-container=".form-group" data-toggle="popover" data-content="" data-placement="bottom" placeholder="Numero" class="form-control">
</div>
<div class="form-group">
<input type="password" id="password" data-container=".form-group" data-toggle="popover" data-placement="bottom" data-content="Ingrese su Contraseña" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<select class="selectpicker" data-width="200px" title="Tipo de Documentacion" data-style="btn-inverse">
<option data-hidden="true"></option>
<option value="DU">DNI</option>
<option value="LC">LC</option>
<option value="LE">LE</option>
<option value="PA">PA</option>
</select>
</div>
<div class="form-group">
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-success btn-xs">Ingresar</button>
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-danger btn-xs">Registrarse</button>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<br/>
<div class="alert alert-block alert-danger " style="display: none">
<button type="button" class="close" aria-hidden="true">×</button>
<h4></h4>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
</div> <!-- /container -->
<script src="public/js/jquery.js"></script>
<script src="public/dist/js/bootstrap.min.js"></script>
<script src="public/js/bootstrap-select.min.js"></script>
</body>
</html>
dont know why. Can anyone lend me a hand? Thank you!