I am a first-try bootstrap guy. The thing i want to achieve is to have labels and inputs same line nice and clean.
Anyone can explain me why in the below example labels are still above inputs? Am i doing something wrong?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta application-name="Test-System">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Bootstrap Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- jQuery UI from Google CDN -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<title></title>
</head>
<body>
<form class="form-horizontal">
<div class="control-group">
<label for="input1" class="control-label">Label</label>
<div class="controls">
<input id="input1" type="text">
</div>
</div>
<div class="control-group">
<label for="input2" class="control-label">Label</label>
<div class="controls">
<input id="input2" type="text">
</div>
</div>
</form>
<!-- jQuery from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</body>
</html>
<div class="controls">
<label for="input1" class="control-label">Label</label>
<input id="input1" type="text">
</div>
Is this what you are looking for?
EDIT
Horizontal label from outside of input's div.
<div class="control-group">
<label for="input1" class="control-label col-sm-2">Label</label>
<div class="controls col-sm-10">
<input id="input1" type="text">
</div>
</div>
Related
I have an html page that references bootstrap's datetimepicker. The calendar is displayed at the bottom of the page when the input is clicked. How do I display it right below the input field?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<!-- datetime picker -->
<!-- Include Bootstrap CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include Moment.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<!-- Include Bootstrap DateTimePicker CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div style="margin:100px">
<div style="margin-bottom: 3em;">
<div style="float:left; margin-right: 5em;">
<label id="startDateTimeLabel">Start DateTime</label>
<input class="form-control"
type="text" id="startDateTime" style="width:200px"/>
</div>
<div>
<label id="endTimeLabel">End DateTime</label>
<input class="form-control"
type="text" id="endDateTime" style="width:200px"/>
</div>
</div>
</div>
<script>
$("#startDateTime").datetimepicker({
format: 'MM/DD/YYYY HH:mm:ss',
defaultDate: new Date(),
});
$("#endDateTime").datetimepicker({
format: 'MM/DD/YYYY HH:mm:ss',
defaultDate: new Date(),
});
</script>
</body>
</html>
Any help is appreciated.
You should wrap the datetimepicker into a relative position div:
<div style="position: relative;">
<div style="float:left; margin-right: 5em;">
<label id="startDateTimeLabel">Start DateTime</label>
<input class="form-control" type="text" id="startDateTime" style="width:200px"/>
</div>
</div>
<div style="position: relative;">
<div style="float:left; margin-right: 5em;">
<label id="endTimeLabel">End DateTime</label>
<input class="form-control" type="text" id="endDateTime" style="width:200px"/>
</div>
</div>
I am having issues centering a form in Bootstrap. The form includes name and comment box including a post button.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name" >
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick ="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>
</body>
</html>
When you run the code, the form only appears on the left side of the page. It won't center the page. Can anyone help me with this?
This would help you in making your form center of page.
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; // optional this is only to get full height
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#Form {
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<form id="Form" onsubmit="return false">
<div class="mx-auto" style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name">
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>
</body>
</html>
The mx-auto class does not work for Bootstrap 3. If you use Bootstrap 4, then it will work no problem. If you need to use Bootstrap 3, then put your own style with a margin: 0 auto;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="mx-auto" style="width: 200px;">
<form id="Form" onsubmit="return false">
<label for="usr">Name:</label>
<input type="text" id="name">
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick="myFunction()">Post</button>
</form>
</div>
<br>
<ul id="adduserinput">
</ul>
</div>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Like #MichaelvE said, the mx-auto works for Bootstrap 4, not 3.
A method I use with 3 is adding the class text-center to the form tag (or wrapping them all inside a <div class="text-center">...</div>. Works fine for me.
Note: It does not center only text, as the name implies.
If you want to go with the Bootstrap way, then you can go with col and col offset classes. Also, try to avoid fixed width elements if you want it to be responsive on all screen sizes. Even more, use form-groups classes for wrap labels and they related input. I show you an example of this (you can play with the browser's width):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<form id="Form" onsubmit="return false">
<div class="col-sm-offset-3 col-sm-6">
<br>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" type="text" id="name"/>
</div>
<div>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment" style="resize:vertical"></textarea>
</div>
<br>
<button class="btn btn-primary" onClick="myFunction()">
Post
</button>
</div>
</form>
</div>
As you can note, the formulary is centered on small, medium and large screen sizes, but it use the full width on extra small devices. Hope this helps you.
I'm using bootstrap styling for form. I want this form to be displayed at the center of the page but I'm not able to do it even though I tried margin 0 auto in css. Can anyone help.
This is the code:
<!doctype html>
<html>
<body>
<h2>Form</h2>
<br>
<form class="form-horizontal inputForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name  </label>
<div class="col-sm-2">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email  </label>
<div class="col-sm-2">
<input class="form-control" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
</body>
</html>
Screenshot of my browser displaying the above form:
Try this. I've wrapped the form with
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto"></div>
</div>
</div>
.mx-auto centers the column automatically and inside the column you can add your form that has .col-3 and col-9, in my example. But adjust it according to how you need the label and input to be shown.
Here is the CodePen.
Edit: I've realized you're using Bootstrap 3, not 4. In that case, you can try something like this, but it needs a bit of work on mobile. CodePen.
If you don't like to center body, put the form in a div and center that div.
body { text-align: center; border: 1px solid;}
form { margin: auto; width: 200px; border: solid blue; display: block;}
<!doctype html>
<html>
<body>
<h2>Form</h2>
<br>
<form class="form-horizontal inputForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name  </label>
<div class="col-sm-2">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email  </label>
<div class="col-sm-2">
<input class="form-control" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
</body>
</html>
please see this picture!
I'm trying to align 'form element' to center.
here is what I tried.
1.I used .form-inline {margin: 0 auto;}2. added text-center in form class="form-inline"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="library/tether-master/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
< /html>
Could you please help me to find-out a solution of it?
Try the following CSS:
.form-inline {
margin: 0 auto;
display: table;
}
if your are using twitter-bootstrap why you not center with bootstrap elements ????? Offsetting columns
.com/css/#grid-offsetting
here is the Bootstrap solution, and its responsiv!
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container jumbotron">
<div class="row ">
<div class="col-sm-8 col-sm-offset-4 column">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</div>
</div>
</body>
</html>
I'm currently working on an redmine app.
I want the page to be responsive, but it doesn't really work, although I have the meta tag included.
The Redmine header/banner is not shown on the page, but I noticed that the code is still there. Maybe this is the problem? If so, how can I fully remove the code for this page?
This is the code of the page:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Redmine</title>
<meta name="description" content="Redmine" />
<meta name="keywords" content="issue,bug,tracker" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="zAhdWOwD3KiOanSXnXiNPIT0NzBRFQwbsH1y4wkiqww=" name="csrf-token" />
<link rel='shortcut icon' href='/favicon.ico?1459352855' />
<link href="/stylesheets/jquery/jquery-ui-1.11.0.css?1459352855" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/application.css?1459352855" media="all" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.11.1-ui-1.11.0-ujs-3.1.3.js?1459352855" type="text/javascript"></script>
<script src="/javascripts/application.js?1459352855" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){ warnLeavingUnsaved('Die aktuellen Änderungen gehen verloren, wenn Sie diese Seite verlassen.'); });
//]]>
</script>
<!-- page specific tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="/plugin_assets/redmine_mtr/stylesheets/styles.css?1459353025" media="screen" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=20, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body class="controller-mtr_account action-mtr_login">
<div id="wrapper">
<div id="wrapper2">
<div id="wrapper3">
<div id="top-menu">
<div id="account">
<ul><li>Anmelden</li>
<li>Registrieren</li></ul> </div>
<ul><li>Hauptseite</li>
<li>Projekte</li>
<li>Hilfe</li></ul></div>
<div id="header">
<div id="quick-search">
<form accept-charset="UTF-8" action="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for='q'>
Suche:
</label>
<input accesskey="f" class="small" id="q" name="q" size="20" type="text" />
</form>
</div>
<h1>Redmine</h1>
</div>
<div id="main" class="nosidebar">
<div id="sidebar">
</div>
<div id="content">
<div id="login-form" class="col-sm-12 modal show" tabindex="-1" role="dialog" aria-hidden="true">
<form accept-charset="UTF-8" action="/mtr/login" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="zAhdWOwD3KiOanSXnXiNPIT0NzBRFQwbsH1y4wkiqww=" /></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="container col-md-12">Login</h1>
<h5 class="container col-md-12">Mobile Time Recording</h5>
</div>
<div class="modal-body form-group">
<div style="padding-top: 5px;">
<input class="login-input" id="username" name="username" style="width: 100%" tabindex="1" type="text" />
</div>
<div style="padding-top: 5px;">
<input class="login-input" id="password" name="password" style="width: 100%" tabindex="2" type="password" />
</div>
<div style="padding-top: 5px;">
<input type="submit" style="height: 38px" class="form-control input-lg btn btn-danger"
name="loginMtr" value="Anmelden »" tabindex="5"/>
</div>
</div>
</div>
</div>
</form></div>
<script type="text/javascript">
//<![CDATA[
$('#username').focus();
//]]>
</script>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="ajax-indicator" style="display:none;"><span>Lade...</span></div>
<div id="ajax-modal" style="display:none;"></div>
<div id="footer">
<div class="bgl"><div class="bgr">
Powered by Redmine © 2006-2015 Jean-Philippe Lang
</div></div>
</div>
</div>
</div>
</body>
</html>
I would first recommend that you use bootstrap and jQuery CDN rather then the files. The reason for this is to help with your asset pipeline and also to future proof your code - for example... if your jQuery lib goes out of date - you would have to manually go back and update it. Rather then just attaching a CDN and its forgetting it.
Second its best practice to always move all your JavaScript src tags to the end of your page before the ending </body> tag.
Also if you could update the problem with an error that you are running into - that may be a bit more helpful. Its best if you keep your developer tools open when making a website (helps to see what errors you run into on the DOM).