I am trying to create a contact form similar to the design bellow, but can't seem to get the correct result. I thought I could do this with flex-box, but I am having trouble getting the Text Area to Display correctly. If there is a better way to do this with keeping the HTML structure the same, I am open to suggestions.
CodePen
<form class="flex-container">
<ul>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="right">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li class="text-area">
<textarea placeholder="right"></textarea>
</li>
</ul>
</form>
Maybe there is a more quick solution but you can do that with bootstrap :
<form class="container">
<div class="col-5 row">
<div class="col-6">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
</div>
<div class="col-3 ml-3">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class = "row mt-3 heightCSS">
<textarea placeholder="right"></textarea>
</div>
</div>
</div>
CSS :
.heightCSS{
height: 8em;
width: 14em;
}
I'm developing a website (http://madworks.fr/suparis/fr/tuniques/14-syakati-tunic.html) and I'd like to align horizontally the "color" "size" "qtt" and "add to cart" button on one single line. I did my best to try modifying the display properties to inline or table-cell but that didn't work out.
Same for the social networks who should be aligned with the wishlist icon.
Can someone help me achieve that ?
Here's the source code :
<form id="buy_block" action="http://madworks.fr/suparis/fr/panier" method="post">
<!-- hidden datas -->
<p class="hidden">
<input type="hidden" name="token" value="58dbb67dab473715d793e92ac45eb820">
<input type="hidden" name="id_product" value="14" id="product_page_product_id">
<input type="hidden" name="add" value="1">
<input type="hidden" name="id_product_attribute" id="idCombination" value="68">
</p>
<div class="box-info-product">
<div class="content_prices clearfix">
<!-- prices -->
<div class="price_box clearfix">
<p class="our_price_display pull-left" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer"><span id="our_price_display" itemprop="price" content="500">500,00 €</span><meta itemprop="priceCurrency" content="EUR"></p>
<p id="old_price" class=" hidden pull-left" style="display: none;"><span id="old_price_display" style="display: none;"></span></p>
</div> <!-- end prices -->
</div> <!-- end content_prices -->
<div class="product_attributes clearfix">
<!-- attributes -->
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_1">Taille </label>
<div class="attribute_list">
<div class="selector" id="uniform-group_1" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">S</span><select name="group_1" id="group_1" class="form-control attribute_select no-print">
<option value="1" selected="selected" title="S">S</option>
<option value="2" title="M">M</option>
</select></div>
</div> <!-- end attribute_list -->
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_3">Couleur </label>
<div class="attribute_list">
<div class="selector" id="uniform-group_3" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">Noir</span><select name="group_3" id="group_3" class="form-control attribute_select no-print">
<option value="8" title="Blanc">Blanc</option>
<option value="11" selected="selected" title="Noir">Noir</option>
</select></div>
</div> <!-- end attribute_list -->
</fieldset>
</div> <!-- end attributes -->
<!-- availability or doesntExist -->
<div id="availability_statut" style="display: none;">
<span id="availability_value" class=" st-label-warning">This product is no longer in stock</span>
</div>
<div id="availability_date" style="display: none;">
<span id="availability_date_label">Availability date:</span>
<span id="availability_date_value"></span>
</div>
<!-- Out of stock hook -->
<div id="oosHook">
</div>
</div> <!-- end product_attributes -->
<div class="box-cart-bottom">
<!-- quantity wanted -->
<div class="qt_cart_box clearfix ">
<p id="quantity_wanted_p">
<span class="quantity_input_wrap clearfix">
-
<input type="text" min="1" name="qty" id="quantity_wanted" class="text" value="1">
+
</span>
</p>
<div id="add_to_cart_wrap" class="">
<p id="add_to_cart" class="buttons_bottom_block no-print">
<button type="submit" name="Submit" class="btn btn-medium btn_primary exclusive">
<span>Add to cart</span>
</button>
</p>
</div>
</div>
<!-- minimal quantity wanted -->
<p id="minimal_quantity_wanted_p" style="display: none;">
The minimum purchase order quantity for the product is <b id="minimal_quantity_label">1</b>
</p>
</div> <!-- end box-cart-bottom -->
</div> <!-- end box-info-product -->
</form>
Ideally you would reorder your HTML so that the 4 elements would be under the same parent element, like:
<div id="attributes">
<fieldset class="attribute_fieldset"></fieldset>
<fieldset class="attribute_fieldset"></fieldset>
<p id="quantity_wanted_p"></p>
<div id="add_to_cart_wrap"></div>
</div>
and they would have display: inline-block; on them, adjust any padding/spacing as necessary, etc.
But if that's not possible or too difficult, you could do it with this CSS:
.product_attributes, .attribute_fieldset, .box-cart-bottom {
display: inline-block;
}
You'll just be left with some padding and classes to adjust until you get it to one line. I would reference a CSS tutorial and look up things like padding, display, floats, etc. if you're having trouble.
i got a template site when i bought a package and it has a built in chat function, however you need to press a "send" button each time to send chat messages, this is the script used, i guess it is kinda easy to do it but in not good at scripting :/
<div class="col-lg-4 border-left affix-items scrollbar" id="room-items">
<div id="dropboxy">
<?php
?>
</div>
</div>
<div class="col-lg-6 affix-players" style="padding:10px;">
<div id="playersdropboxy">
<?php include_once("players.php"); ?>
</div>
<div id="affix-players" class="scrollbar">
<div id="rooms"></div> </div> </div> <div class="col-lg-5 affix-right">
<div class="col-xs-24 chat"> <div class="row chat-container">
<div class="row chat-buttons"> <div class="col-xs-24"> <div class="media-body"> <div class="input-group">
<input type="text" class="form-control chat-message" id="text-massage" style="margin-left:6px;" maxlength="300"> <span class="input-group-btn">
<?php if(isset($_SESSION['steamid'])) { ?>
<button class="btn btn-primary" type="submit" data-loading-text="<i class='fa fa-spinner fa-spin'></i> WAIT..." id="send_massage" style="margin-right:6px;">SEND</button>
<div class="sml-bnt" id="smile"></div>
<? }
else { ?>
<form method="get" action="index.php"><input type="hidden" name="login" value=""/><input type="submit" class="btn btn-primary" value="Log in to chat" style="margin-right:6px;"/></form>
<?php }
?>
</span> </div> </div> </div> </div>
<div class="col-xs-24 messages messages-img" style="width:250px;">
<?php if(isadmin($_SESSION['steamid'])){
echo'Admin tools: [clear chat], [turn '. (chaton() ? 'off' : 'on').']';
} ?>
<? include ('mini-chat.php'); ?>
</div> </div>
</div>
<div id="raffle"><div class="col-xs-24 raffle"> <div class="cont"> <div class="circle"> <img id="raffle-img"> </div> <h4 class="name" id="raffle-name"></h4>
<h4 id="countdown-raffle-timer" data-countdown="2020-08-08"></h4>
<a class="btn btn-default" href="?login">LOG IN</a> </div> </div> </div> </div> </div>
Try change method="get" to method="post"
In edit mode we can see all parsys right, and In preview mode CQ shows us how the page would look in Publish instance. I have a page in which I have hardcoded my textfields and I have used parsys for entering Text (Labels ) on the page ...
But when I enter the preview mode the parsys leaves some space which makes my UI look bad.
Please see the images below.
How do I remove this extra space ?
I think I'm close to solving it ... I think a class in bootstrap CSS is adding the space its not the Parsys anyways here is the code
<%--
Videojet Add New User Component
--%>
<%#include file="/libs/foundation/global.jsp"%>
<%# page
import="com.videojet.hiresite.beans.HRRepresentative,
java.util.*"%>
<%
List<HRRepresentative> hrList = (List<HRRepresentative>)request.getAttribute("hrList");
%>
<cq:include script="head.jsp" />
<html>
<head>
<cq:includeClientLib css="videojetlib" />
<cq:includeClientLib css="customcarousel" />
<cq:includeClientLib css="bootstrapold" />
<link rel="shortcut icon" type="image/ico"
href="/content/dam/videojet/favicon.ico" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="#"><img
src="/content/dam/videojet/Videojet-Logo.png"></img></a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<a href="/services/videojet/v1/LoginController/logout"
class="navbar-link">Logout</a>
</p>
<ul class="nav">
<li class="active"><a
href="/services/videojet/v1/AddNewUserController/view">Add
New User</a></li>
<li><a
href="/services/videojet/v1/EditDeleteUsersController/view">Edit
/ Delete User</a></li>
<li><a
href="/services/videojet/v1/EditMyInformationController/view">Edit
My Information</a></li>
<li>Upload Documents</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Adding above new Top navigation -->
<div style =" padding-bottom: 20px;">
<div class="container shadow">
<div class="span11">
<cq:include path="carouselparsys"
resourceType="foundation/components/parsys" />
</div>
<div class="row span11">
<form class="form-horizontal"
action="/services/videojet/v1/AddNewUserController/addUser"
method="POST" enctype="multipart/form-data" id ="addNewUserForm">
<input type="hidden" name="flagField" id="flagField" value="0"/>
<div class="row span11">
<div class="control-group">
<label class="control-label" for="inputEmail"><cq:include path="zensarParsys" resourceType="foundation/components/parsys"/></label>
<div class="controls">
<input type="text" id="addNewUserUID" name="addNewUserUID"
class="input-xlarge" style="height: 30px;">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">First Name</label>
<div class="controls">
<input type="text" id="addNewUserFirstName"
name="addNewUserFirstName" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Last Name</label>
<div class="controls">
<input type="text" id="addNewUserLastName"
name="addNewUserLastName" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Email
Address</label>
<div class="controls">
<input type="text" id="addNewUserEmailId"
name="addNewUserEmailId" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">HR
Representative</label>
<div class="controls">
<select class="input-xlarge" id="addNewUserHRRep"
name="addNewUserHRRep">
<c:forEach items="${hrList}" var="hr">
<option value="${hr.repId}">${hr.firstName}
${hr.lastName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Non-Compete
Letter</label>
<div class="controls">
<input type="file" id="addNewUserNonCompeteLetter"
name="addNewUserNonCompeteLetter" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Offer
Letter</label>
<div class="controls">
<input type="file" id="addNewUserOfferLetter"
name="addNewUserOfferLetter" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Employee
Type</label>
<div class="controls">
<label class="checkbox inline"> <input type="radio"
id="addNewUserLocal" name="addNewUserType" checked="checked" value="1">
Local
</label> <label class="checkbox inline"> <input type="radio"
id="addNewUserField" name="addNewUserType" value="2">
Field
</label> <label class="checkbox inline"> <input type="radio"
id="addNewUserInternational" name="addNewUserType" value="3">
International
</label>
<label class="checkbox inline"> <input type="radio"
id="addNewUserInternational" name="addNewUserType" value="4">
Admin
</label>
</div>
<!-- the Div that brings them in line !!! -->
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Special
Intructions</label>
<div class="controls">
<textarea rows="3" class="input-xlarge" id="addNewUserTextArea"
name="addNewUserTextArea"></textarea>
</div>
</div>
<div class="control-group">
<div class="control-label">
<button type="submit" class="btn btn-primary">Add User</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="footer">
<cq:include path="addNewUserVideojetFooter"
resourceType="foundation/components/parsys" />
</div>
<cq:includeClientLib js="videojetlib" />
<cq:includeClientLib js="customcarousel" />
<cq:includeClientLib js="bootstrapold" />
<!-- modal -->
<div id="usderIdCheckModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-header">
<h3 id="myModalLabel">Checking if User Id is available</h3>
</div>
<div class="modal-body" align="center">
<div align="center">
<img src="/content/dam/videojet/ajax-loader.gif"></img>
</div>
<p>Please Wait...</p>
</div>
</div>
<!-- Second Modal -->
<!-- modal -->
<div id="notAvailableModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Warning</h3>
</div>
<div class="modal-body" align="center">
<div align="center">
</div>
<p>This User Id already exists</p>
</div>
</div>
<script src="/etc/designs/videojet/clientlibs/js/addNewUserScript.js"></script>
</body>
</html>
Maybe there is a style rule in the drag components like visible: hidden; change to display: none
Well I solved it my self. The problem was with bootstrap. The extra space was added by bootstrap class="control-group", I just replaced it with class="row".
There is still little space but at least better than before.
You should be able to add ?wcmmode=disabled to the end of your browser address bar to remove extra spacing.
GA is reporting not installed even though i've got the script in the HEAD location as specified, should it show straight away?
I've followed the full instruction on how to do it, or do I just need to sit and wait?
Code is
<?php
require("config.php");
$submitted_username = '';
if(!empty($_POST)){
$query = "
SELECT
id,
username,
password,
salt,
email
FROM users
WHERE
username = :username
";
$query_params = array(
':username' => $_POST['username']
);
try{
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
$login_ok = false;
$row = $stmt->fetch();
if($row){
$check_password = hash('sha256', $_POST['password'] . $row['salt']);
for($round = 0; $round < 65536; $round++){
$check_password = hash('sha256', $check_password . $row['salt']);
}
if($check_password === $row['password']){
$login_ok = true;
}
}
if($login_ok){
unset($row['salt']);
unset($row['password']);
$_SESSION['user'] = $row;
header("Location: main.php");
die("Redirecting to: main.php");
}
else{
print("Login Failed.");
$submitted_username = htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8');
}
}
?>
<!DOCTYPE html>
<html>
<Head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0>
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5178940-4', 'fishtrends.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class="container">
<b>Fishtrends</b> - Social Fish trending
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><i class="glyphicon glyphicon-home"></i> Register</li>
<li class = "dropdown">
<i class="glyphicon glyphicon-user"></i> Login<b class="caret"></b>
<ul class = "dropdown-menu" style="padding: 15px; padding-bottom: px;">
<form action="login.php" method="post"> Username:<br />
<input type="text" name="username" value="<?php echo $submitted_username; ?>" />
<br /><br /> Password:<br /> <input type="password" name="password" value="" />
<br /><br />
<input type="submit" class="btn btn-info" value="Login" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="indexjumbotron">
<h1>Be Fish social</h1>
<p1>Add and see catch details, baits used, weights of fish plus more</p1>
</div>
<div class="container">
<div class="panel panel-default" style="margin:0 auto;width:500px">
<div class="panel-heading">
<h1 class="panel-title"><b>Sign up now for Free!</B></h1>
</div>
<div class="panel-body">
<form name="registration" method="post" action="/register.php" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Your Userame">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-xs-2 control-label">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Choose a password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-success">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<i class="fa fa-twitter fa-1x"></i> Follow Us
<p class = "navbar-text pull-right"><i class="glyphicon glyphicon-question-sign"></i> About Us</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>
I can't find anything wrong in this code, did you tried the real time reports to clarify. If the code is installed then you can see some live traffic reports including referrals and other related info. Did you try that ?
The regular reporting won't update for several hours. However, there is a real-time tab that should show you results immediately. On the HTML side of things, you've got a lot of missing/extra/out-of-order tags. I think this is what you are aiming for in the HTML (I did not include the PHP code since I haven't made any changes to it):
<!DOCTYPE html>
<html>
<head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5178940-4', 'fishtrends.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class="container">
<b>Fishtrends</b> - Social Fish trending
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><i class="glyphicon glyphicon-home"></i> Register</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<i class="glyphicon glyphicon-user"></i> Login<b class="caret"></b>
</a>
<ul class = "dropdown-menu" style="padding: 15px; padding-bottom: px;">
<form action="login.php" method="post"> Username:<br />
<input type="text" name="username" value="<?php echo $submitted_username; ?>" />
<br /><br /> Password:<br /> <input type="password" name="password" value="" />
<br /><br />
<input type="submit" class="btn btn-info" value="Login" />
</form>
</ul>
</li>
</ul>
</div>
</div>
<div class="indexjumbotron">
<h1>Be Fish social</h1>
<p>Add and see catch details, baits used, weights of fish plus more</p>
</div>
<div class="container">
<div class="panel panel-default" style="margin:0 auto;width:500px">
<div class="panel-heading">
<h1 class="panel-title"><b>Sign up now for Free!</b></h1>
</div>
<div class="panel-body">
<form name="registration" method="post" action="/register.php" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Your Userame" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email" />
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-xs-2 control-label">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Choose a password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-success">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<a href = "http://www.twitter.com/fishtrends" class = "navbar-btn btn-primary btn pull-right">
<i class="fa fa-twitter fa-1x"></i> Follow Us
</a>
<p class = "navbar-text pull-right"><a href ="#">
<i class="glyphicon glyphicon-question-sign"></i> About Us</a>
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>