I am writing a PhoneGap application and using Twitter's Bootstrap for responsive design.
The boxes that say campus/account/department are the select boxes. I think it's obvious the problem is how the select boxes are small, and unchangeable when I try things in css like:
select{ height: 30px; /** OR */ lineheight: 30px; }
Screenshot of what the issue is with my select boxes:
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<link rel="stylesheet" type="text/css" href="css/precode.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<title>P-Card Mobile</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li>
<li id="titleText"><h4>Blackbriar</h4></li>
</ul>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropDown">Home <i class="icon-white icon-home"></i></li>
<li class="dropDown">Transactions <i class="icon-white icon-credit-card"></i></li>
<li class="dropDown">Settings <i class="icon-white icon-cog"></i></li>
<li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="templates">
<ul id="templateUl" class="nav nav-pills">
<li class="templi">
<a class="pill">
<text class="temp">Walmart</text>
</a>
</li>
</ul>
</div>
<div id="templateEdit" class="span9">
<form id="codingForm" method="post">
<input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required>
<input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required>
<select id="campusField" required>
<option value="">Campus</option>
</select>
<select id="accountField" required>
<option value="">Account</option>
</select>
<select id="departmentField" required>
<option>Deptartment</option>
</select>
<input id="programNameField" type="text" class="tallerInput" placeholder="Program Name">
<input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID">
<input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID">
<br>
<button id="saveBtn" class="btn btn-large btn-primary">Save</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/precodeFunctions.js"></script>
<script type="text/javascript" src="js/precode.js"></script>
</body>
</html>
Update style as follows :
select.custom { min-height: 30px; /** OR */ line-height: 30px; }
change your select tags html as follows :
<select id="accountField" class="custom" required>
<option value="">Account</option>
</select>
Related
I need your help for an almost entirely css slider.
When I click for the first time on a radio button, no animation is done ... At the 2nd click it's ok. I dont know if is the javascript or css.
Can you help me with this bug?
https://jsfiddle.net/italya/prbtna3o/
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="TEST created with cssSlider, a free wizard program that helps you easily generate beautiful web slideshow" />
</head>
<body style="background-color:#d7d7d7; margin: auto; text-align: center;">
<!-- Start cssSlider.com -->
<!-- Generated by cssSlider.com 2.1 -->
<link rel="stylesheet" href="cssslider5_files/csss_engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="cssslider5_files/csss_engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="cssslider5_files/csss_engine1/ie.js"></script><![endif]-->
<script type="text/javascript" src="cssslider5_files/csss_engine1/gestures.js"></script> <div class='csslider1 autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
<input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
<ul>
<li class="cs_skeleton"><img src="https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg" style="width: 100%;"></li>
<li class='num0 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE1' title='SLIDE1' /></li>
<li class='num1 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE2' title='SLIDE2' /></li>
<li class='num2 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE3' title='SLIDE3' /></li>
<li class='num3 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE4' title='SLIDE4' /></li>
</ul><div class="cs_engine">slider by cssSlider.com v2.1</div>
<div class='cs_description'>
<label class='num0'><span class="cs_title"><span class="cs_wrapper">SLIDE1</span></span></label>
<label class='num1'><span class="cs_title"><span class="cs_wrapper">SLIDE2</span></span></label>
<label class='num2'><span class="cs_title"><span class="cs_wrapper">SLIDE3</span></span></label>
<label class='num3'><span class="cs_title"><span class="cs_wrapper">SLIDE4</span></span></label>
</div>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide1.jpg' alt='SLIDE1' title='SLIDE1' /></span></label>
<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide2.jpg' alt='SLIDE2' title='SLIDE2' /></span></label>
<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide3.jpg' alt='SLIDE3' title='SLIDE3' /></span></label>
<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide4.jpg' alt='SLIDE4' title='SLIDE4' /></span></label>
</div>
</div>
<!-- End cssSlider.com -->
</body>
</html>
Thanks a lot
i have a probleme with my css in jsp project
the probleme is that the css doesn't apply on page
i've tried to change the path of css files but it doesn't work
i've also to change
by : <%#include file="../assets2/css/bulma.css" %> but it Caused more errors related to jsp compilation ...
on network tap (inspect elements) :
network tabmy project files
the code on my .jsp file :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page import="entities.Dossier" %>
<%# page import="entities.Responsable" %>
<%# page import="entities.Tache" %>
<%#page import="java.util.ArrayList"%>
<%#page import="java.util.List"%>
<%#page import="web.TrackingServlet"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tAccueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Premium Bootstrap 4 Landing Page Template" />
<meta name="keywords" content="bootstrap 4, premium, marketing, multipurpose" />
<meta content="Themesdesign" name="author" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!--Slider-->
<link rel="stylesheet"type="text/css" href="css3/owl.carousel.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.theme.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.transitions.css" />
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="css3/magnific-popup.css">
<!-- css -->
<link href="css3/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css3/icons.css" rel="stylesheet" type="text/css" />
<link href="css3/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light" id="navbar">
<div class="container">
<!-- LOGO -->
<a href="http://localhost:8080/Tracking/Acceuil" class="logo-sticky">
<img src="img/logogo.png" alt="" class="logo-dark" height="32" />
<img src="img/logogo.png" alt="" class="logo-light" height="32" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="remixicon-menu-fill"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto navbar-center" id="mySidenav">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
Startseite
</li>
<c:if test="${session == null }">
<li class="nav-item">
Anmelden
</li>
</c:if>
<c:if test="${session != null }">
<li class="nav-item">
Mein Raum
</li>
<li class="nav-item">
Abmelden
</li>
</c:if>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- HERO START -->
<section class="hero-4-bg position-relative bg-gradient" id="home">
<div class="container">
<div class="row align-items-center hero-4-content">
<div class="col-lg-5">
<h1 class="text-white hero-4-title font-weight-medium mb-4 line-height-1_4">Verfolgen Sie Ihre Datei</h1>
<p class="text-white-50 mb-5">WEBTRACK bietet den schnellsten und genauesten Verfolgungsdienst auf der Grundlage einer intelligenten Datenanalyse..</p>
<div class="text-center subcribe-form mt-4">
<form action="progression" method="post">
<c:if test="${id_doc != null }">
<input type="text" value="${id_doc }" name="tracking">
</c:if>
<c:if test="${id_doc == null }">
<input type="text" placeholder="Geben Sie die Tracking-Nummer ein..." name="tracking">
</c:if>
<button type="submit" class="btn rounded-pill btn-purple">Verfolgen </button>
</form>
</div>
</div>
<div class="col-lg-6 offset-lg-1">
<div class="hero-4-img mt-5 mt-lg-0">
<img src="images/hero-4-img.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="home-bottom-shape">
<img src="images/home-4-bottom-shape.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!-- HERO END -->
<!-- FOOTER END -->
<!-- javascript -->
<script src="js2/jquery.min.js"></script>
<script src="js2/bootstrap.bundle.min.js"></script>
<script src="js2/scrollspy.min.js"></script>
<script src="js2/jquery.easing.min.js"></script>
<!-- COUNTER -->
<script src="js2/counter.int.js"></script>
<!-- carousel -->
<script src="js2/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js2/jquery.magnific-popup.min.js"></script>
<script src="js2//magnificpopup-int.js"></script>
<!-- Main Js -->
<script src="js2/app.js"></script>
</body>
</html>
I think you want to include a .css file to jsp. try this
<jsp:include page="../css3/index.css"/>
or
<%#include file="/WEB-INF/include/header.jsp"%>
I have created a JSP page where I want to use the CSS properties I have written in a custom CSS file in my SpringBoot project. But unfortunately SpringBoot is not reading the custom CSS file. In a similar vein it is also not reading the CSS files of Bootstrap, hence I am having to link to its CDN instead.
I have read solution to similar to my question here but none of the solutions worked for me. Not sure if these solutions work case specific.
Directory Structure
- src
- main
- java
- resources
- static
- css
- style.css
- webapp
- WEB-INF
- views
- addCountry.jsp
addCountry.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Add Country</title>
</head>
<body>
<!-- Navbar Code Starts Here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="http://localhost:8080/WorldAtlas/">World Atlas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="http://localhost:8080/WorldAtlas/addCountry">Add Country</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar Code Ends Here -->
<!-- Add Country Form Code Starts Here -->
<div class="container wrapper">
<form action="saveCountryData" method="POST">
<div>
<input type="text" name = "country" class="form-control" placeholder="Country">
<input type="text" name = "capital" class="form-control" placeholder="Capital City">
<input type="text" name = "isocode" class="form-control" placeholder="ISO Code">
<input type="text" name = "area" class="form-control" placeholder="Area">
<select name = "continent" class="form-control">
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<input type="text" name = "currency" class="form-control" placeholder="Currency">
<input type="text" name = "extension" class="form-control" placeholder="Extension">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Add Country Form Code Ends Here -->
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous">
</body>
</html>
Use this way <link rel="stylesheet" type="text/css" href="css/style.css" />
I'm using Bootstrap 3.1.1 and my login page is not responsive under 768px.
The page is breaking as shown in the pictures:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>MY Site</title>
<link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='Saúde Inteligente Móvel' name='description'>
<link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
<link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
<link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<!-- / START - page related stylesheets [optional] -->
<!-- / END - page related stylesheets [optional] -->
<!-- / bootstrap [required] -->
<link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
<script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
<![endif]-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/site-css")
#Scripts.Render("~/bundles/libs/modernizr")
</head>
<body class='contrast-blue login contrast-background'>
<div class='middle-container' style="display: none" data-bind="visible: true">
<div class='middle-row'>
<div class='middle-wrapper'>
<div class='login-container-header'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
</div>
</div>
</div>
</div>
</div>
<div class='login-container'>
<div class='container'>
<div class='row' data-bind="validationOptions: {
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true
}">
<div class='col-sm-4 col-sm-offset-4'>
<h1 class="text-center">
</h1>
<div class="row">
<div class='col-sm-12'>
<div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
<ul>
<li data-bind="validationMessage: model().Email"></li>
<li data-bind="validationMessage: model().Senha"></li>
</ul>
</div>
</div>
</div>
<form>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
<i class='icon-lock text-muted'></i>
</div>
</div>
<div class='checkbox'>
<label for='remember_me'>
<input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
Lembrar de mim
</label>
</div>
<button class='btn btn-block' data-bind="click: submit">Entrar</button>
</form>
<div class='text-center'>
<hr class='hr-normal'>
#Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
</div>
</div>
</div>
</div>
</div>
<div class='login-container-footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<img src="~/Images/logo-rodape.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/libs/jquery")
#Scripts.Render("~/bundles/libs/base")
<script type="text/javascript">
RouteUtility.rootPath = '#Url.Action("Index", "Home")';
</script>
<script type="text/javascript" src="#Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>
EDIT:
After adding col-xs-* as suggested, a weird behaviour is happening.
When I add col-xs-*, the fields will fit only with 768px and up. If it's under 768px they will grow!!
It's totally the opposite!
How to fix this?
Under 768px: http://postimg.org/image/d0zcna7bf/
768px and up: http://postimg.org/image/56isu0qtt/
thiago Hi there.
Have a look around line number 60 in you code for this...
<div class='col-sm-4 col-sm-offset-4'>
When your screen size hits this breakpoint it will expand to 100% width because you are not controlling/using the col-xs-XX class here.
If you add this to your code like this...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
for the line of code around line 60 and resize the window, you will see you have control.
This line of code you are using it is used to wrap the Form block, to set the width of this Form.
You just need to take control of this at all breakpoints.
Hope this helps.
Added to this
This is what I get when resized.
Using... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
You can control the width for xs device adding eg col-xs-6 :
<div class='form-group'>
<div class='controls with-icon-over-input col-xs-6'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
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!