I am trying to customize the look of the login page for my laravel application.
Here is the file content structure that I have:
In the layouts/app.blade.php file I am trying to add a "app.min.1.css" css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
so it's the app.min.css, but when I go and run my application I get a parsing error as follows:
The file is there and I did verify it, by creating an stan alone view to see if all the css file and js file were loaded correctly:
All I am trying to do is to use the existing Auth pages provided by laravel, but give them my own look and feel. Is it possible to add you own css and js files ?
Here is the code for the app.blade:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
here is the code for the auth/login/blade:
#extends('layouts.app')
#section('content')
<div class="login" data-lbg="teal">
<!-- Login -->
<div class="l-block toggled" id="l-login">
<div class="lb-header palette-Teal bg">
<i class="zmdi zmdi-account-circle"></i>
Salve! Per favore effettui il login
</div>
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="lb-body">
<div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input">
<label class="fg-label">Indirizzo Email</label>
</div>
</div>
<div class="form-group fg-float ">
<div class="fg-line">
<input type="password" class="input-sm form-control fg-input">
<label class="fg-label">Password</label>
</div>
</div>
<button class="btn palette-Teal bg">Entra</button>
<div class="m-t-20">
<a data-block="#l-register" data-bg="blue" class="palette-Teal text d-block m-b-5" href="">Crea un Account</a>
<a data-block="#l-forget-password" data-bg="purple" href="" class="palette-Teal text">Password Dimenticata?</a>
</div>
</div>
</form>
</div>
</div>
#endsection
You have an error here.
Remove the space between = and > for 'csrfToken' = > csrf_token(),
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
You've got an extra space here:
'csrfToken' = > csrf_token(),
Fix so that it is:
'csrfToken' => csrf_token(),
Related
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"%>
Basically I am trying to have an fixed on top nav-bar and using only vanilla bootstrap. This required me to have a modification as the content needs to be padded in order for the page to render correctly.
Below is the form page it renders the Nav Bar on top but the content renders underneath the navbar instead of below it.
NOTE, that the base page itself works for other templates. What gives??
works(list Page):
{% extends 'expirations/index.html' %}
{% block content %}
<div class="container-fluid">
{% for drug in drugs %}
<div class = '.col-sm-12'>
<ul class = 'list-group'>
<li class = "list-group-item" >
<span class = "badge">First Expiration: {{ drug.early_exp|date:"l M d Y" }}</span>
{{ drug.name }}
{% regroup drug.expiration_dates.all by facility as facility_list %}
{% for x in facility_list %}
<span class="label label-info">{{ x.grouper }}</span>
{% endfor %}
</li>
</ul>
</div>
{% endfor %}
</div>
{% endblock %}
doesn't work (form Page):
{% extends "expirations/index.html" %}
{% block content %}
<div class = "container">
<h1>Add Expiration for:</h1>
<h4>{{drug_name.name}}</h4>
<form method="POST" class="post-form">
{% csrf_token %}
{{form.as_p}}
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
{% endblock %}
index.html:
<html>
<head>
<title>Expirations Tracker</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
{# Fonts#}
<link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">
<!---DatePicker-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>>
body {
padding-top: 100px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Expirations</a>
</div>
<div class="collapse navbar-collapse" id="navBar">
<ul class="nav navbar-nav">
<li class="nav-item"><span class ="glyphicon glyphicon-home"></span> Home</li>
<li class="nav-item"><span class = "glyphicon glyphicon-plus"></span> Add Drugs</li>
<li class="nav-item"><span class = "glyphicon glyphicon-calendar"></span> List By Expirations</li>
<li class="nav-item"><span class = "glyphicon glyphicon-map-marker"></span> Facilities Serviced</li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<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/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script>
$('#id_expirationDate').datepicker({
changeMonth: true,
changeYear: true,
startView: 2,
autoclose: true
});
</script>
</body>
</html>
For me, both of them, the form and the list page, are rendering content underneath the nav bar.
However, there is a typo in your index.html:
<style>>
body {
padding-top: 100px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
</style>
Remove the extra '>' after the <style> tag and it should work fine.
I made authentication example page with php artisan make:auth.
example page If i make changes in css stylesheet nothing is happening. Page is looking same all time. Css stylesheet is located in \public\css folder.
app.blade.php
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
app.css is blank
app.scss
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
_variables.scss
// Body
$body-bg: #f5f8fa;
// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;
// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;
// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;
// Navbar
$navbar-default-bg: #fff;
// Buttons
$btn-default-color: $text-color;
// Inputs
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);
// Panels
$panel-default-heading-bg: #fff;
From https://laravel.com/docs/5.8/frontend#writing-css:
You can compile your SASS files to plain CSS using Laravel Mix. The
npm run dev command will process the instructions in your
webpack.mix.js file.
So execute:
npm install
npm run dev
I'm not sure if you are talking about editing the app.css file or a new custom one.
If app.css gets overwritten by the pre-processor (normally shoudn't), you can always create a new css file in public/css/my-styles.css and load it in your view:
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<link rel="stylesheet" href="{{ URL::asset('/css/my-styles.css') }}">
Make sure to use greater specificity on your css rules to overwrite any predefined settings or use !important when you have too.
Also clearing your browser's cache (or using private mode, like Chrome's Incognito) will make sure that your are seeing your current css settings and not some cached content.
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!
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>