UI Bootstrap/Bootstrap 3 - How do I center a container? - css

I'm creating a simple login page with Angularjs, and am trying to add CSS to it using UI Bootstrap. One of the dependencies that UI Bootstrap required was Bootstrap CSS, so I have that included in my page too. Right now, my form looks as intended; what I want to do is to center the container itself vertically, so that it sits in the middle of the page. Is there a good way for me to go about doing that? I've searched up a lot of solutions, and they either do not change anything, or squash/change the form itself in a way that I don't want. And to be honest, I'm not sure if the reason I'm having difficulty centering the container has to do with UI Bootstrap or anything.
Here is an image of what the form looks like:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<!-- This is the div for the form component -->
<div ng-app="form-component">
<div class="container">
<div class="row center-block">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- class="col-sm-4" -->
<div class="col-sm-4"></div>
</div> <!-- class="row justify-content-center" -->
</div> <!-- class="container" -->
</div> <!-- np-app form-component -->
<script>
var form = angular.module("form-component", ["ui.bootstrap"]);
</script>
</body>
</html>
Any help would be greatly appreciated, thank you very much.

Try this
html, body {
height: 100%
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<!-- This is the div for the form component -->
<div ng-app="form-component" class="wrapper">
<div class="container">
<div class="row center-block">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- class="col-sm-4" -->
<div class="col-sm-4"></div>
</div> <!-- class="row justify-content-center" -->
</div> <!-- class="container" -->
</div> <!-- np-app form-component -->
<script>
var form = angular.module("form-component", ["ui.bootstrap"]);
</script>
</body>
</html>

Related

Bootstrap - Make child elements horizontally aligned to middle within a col-lg-4 class

I am with Bootstrap 4.3.1 and use flex for page layout.
<div class='row d-flex align-items-center'>
<div class='col-lg-12'>
<div class="form-group row">
<div class="col-lg-2">
<label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
</div>
<div class="col-lg-10">
<select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
</select>
</div>
</div>
</div>
</div>
The select element is currently horizontally top-aligned. How can I set the select element horizontally aligned in the middle of the column?
.row in Bootstrap 4 have display: flex so we can remove the d-flex. .align-items-center will only affect the direct children.
<div class='row'>
<div class='col-lg-12'>
<div class="form-group row align-items-center">
<div class="col-lg-2">
<label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
</div>
<div class="col-lg-10">
<select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
</select>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="all">
<div class="row">
<div class='col-lg-12'>
<div class="form-group row align-items-center">
<div class="col-lg-2">
<label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
</div>
<div class="col-lg-10">
<select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Use align-items-center to the immediate parent .row
Hope it'll help.

Bootstrap 4: Columns fixed width + rest of line in card-footer

I've a bootstrap-4 card with a footer. Inside of the footer there is a (fixed-width) input field and a button. The button should expand to width:100% - width of the input field.
https://jsfiddle.net/aq9Laaew/224543/
input {
width:3rem;
}
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<input type="text" value="1" />
<button>
Rest of width
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<div class="col-auto">
<input type="text" value="1" />
</div>
<div class="col-12">
<button>
Rest of width
</button>
</div>
</div>
</div>
How can it be done? As you can see in the fiddle, I tried to use col-auto, but this breaks the line with input+button into 2 lines.
You can use property css width: calc(100% - "width_your_button");
Or Bootstrap example:
<div class="card-footer">
<div class=" col-sm-2 col-xs-2 col-md-2 col-lg-2">
<input type="text" value="1" />
</div>
<div class=" col-sm-10 col-xs-10 col-md-10 col-lg-10">
<button>
Rest of width
</button>
</div>
</div>
First adding a d-flex class to the card-footer making it a flex container, plus adding the following CSS should solve the problem:
.card-footer button { flex: 1 }
The flex: 1 makes the button take the remaining space.
input {
width:3rem;
}
button {
flex: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer d-flex">
<input type="text" value="1" />
<button>
Rest of width
</button>
</div>
</div>
It's better to use bootstrap columns to do this. (bootstrap 4)
Also you can use css calc() property. Refer below example.
/*CSS for Example 1*/
.ex-1 input {
float: left;
width: 3rem;
}
.ex-1 button {
display: block;
float: left;
width: calc( 100% - 3rem);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- Example 1 -->
<div class="card ex-1">
<div class="card-body">
<h5 class="card-title">Exxample 1</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<input type="text" value="1" />
<button>
Rest of width
</button>
</div>
</div>
<!-- Example 2 -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Example 2</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col-2 pr-0">
<input type="text" class="form-control" value="1">
</div>
<div class="col-10 pl-0">
<button class="p-1 w-100">Rest of width</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Align vertically a div inside bootstrap row

I cannot figure out how to align the div containing the "Go" button vertically to bottom.
I tried several things but none worked.
Here is a jsfiddle: https://jsfiddle.net/2fzq3xb3/2/
and here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row" style="position: relative;">
<div class="col-xs-10">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date'>
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date'>
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="position: relative; bottom: 50%;transform: translateY(-50%);">
<button type="submit" class="btn btn-primary btn-xs">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
Add this CSS to the parent div.
display:table-cell;
vertical-align:middle;
Here is the solution that I found. Any suggestions for improvements are welcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row">
<div class="col-xs-10" style="max-width: 500px;">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date' style="max-width: 230px;">
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date' style="max-width: 230px;">
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="height:74px;">
<button type="submit" class="btn btn-primary btn-ss" style="position:absolute; bottom: 15px;">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
just make sure row has its position property set to static (default value). I don't know why, but if you change it to relative or absolute it won't work.
.col-xs-12 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-xs-12">
some text...
</div>
</div>

How to get page background image behind bootstrap form

I am currently trying to put a whole page background but it is being shifted to the bottom because of the bootstrap form. I want the image to take the entire page and the bootstrap form to stay where it is. Also, how do I shrink the form slightly so it takes maybe half a page width?
This is my code:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- 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>
</head>
<style>
html{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div">
<div class="panel panel-default">
<form id="iForm">
<div class="row">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Would mean a lot if someone could kindly help me out, as I am quite novice to web development
Thanks
Instead of setting the background in html you should set it in the body instead.
E.g.
body{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
Fiddle
first set your picture to body background body{background:url("images/watchBackground.jpg") no-repeat center center fixed;}
then transparent elements that you want by inline css styling:style="background-color:transparent;"
your correction code is this:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- 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>
</head>
<style>
body{
background:url('k.jpg') no-repeat center center fixed;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div" style="background-color:transparent;">
<div class="panel panel-default" style="background-color:transparent;">
<form id="iForm" style="background-color:transparent;">
<div class="row" style="background-color:transparent;">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
#benj Your css is all good. It's just that your body color is set to white (bootstrap default - coming from scaffolding in your case) and that white color is overlapping over your background image. You need to set it to transparent.
body {
background-color: transparent;
}
for form container width (shrink issue)...just wrap the whole panel into the bootstrap grid column..for example...
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
.........
......Your form code.......
...............
</div>
</div>
Adjust column width and offset value as per your requirement

W3C-Validation problem with overlapping form and div-tags

I'm having problems with validating this code with the W3 validator.
The problem is with the <form> tag.
I need the <form> tag to overlap several <div> and <span> tags because I have many different input fields and such, but I'm also using the Form2 and Form3 with input fields and such so I need to use </form> before the Form2. But this gives me problems when validating because it's overlapping <div> and <span> tags.
What can I do to make the validation work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv" xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="headerwrapper">
<div class="header alignleft">
Home
</div>
<div class="header alignright">
<div id="searchfield">
Search
</div>
</div>
<div id="menu">
Menu
</div>
</div>
<div class="clear"></div>
<div class="content">
<div class="box alignleft">
<div class="boxtop"></div>
<div class="boxmiddle">
<form action="links.php" method="post"><input type="hidden" name="edit_page_check" value="yes" />
<p>
<span id="page_leftbox">Text</span>
</p>
</div>
<div class="boxbottom"></div>
</div>
<div class="column580 alignright">
<div class="header580">
<h2>Topic</h2><span class="headerdesc">Text</span>
</div>
<p>
<span id="page_info">Info</span>
</p>
</form>
<br/>
<div id="addlinkform" style="display: none;">
Form2
</div>
<div id="linkform" style="display: none;">
Form3
</div>
</div>
</div>
<div class="clear"></div>
<div class="divider800"></div>
<div id="footer">
Footer text
</div>
</div>
</body>
</html>
XHTML doesn't let you overlap tags. For example, this is invalid:
<div><form></div></form>
What you're going to want to do is, rather than trying to only encompass the items that you believe are in the form, encompass the <input /> tags that are in the form as well as their containers. For instance, your code should look like this instead:
<div class="content">
<form action="links.php" method="post"><input type="hidden" name="edit_page_check" value="yes" />
<div class="box alignleft">
<div class="boxtop"></div>
<div class="boxmiddle">
<p>
<span id="page_leftbox">Text</span>
</p>
</div>
<div class="boxbottom"></div>
</div>
<div class="column580 alignright">
<div class="header580">
<h2>Topic</h2><span class="headerdesc">Text</span>
</div>
<p>
<span id="page_info">Info</span>
</p>
<br/>
<div id="addlinkform" style="display: none;">
Form2
</div>
<div id="linkform" style="display: none;">
Form3
</div>
</div>
</form>
</div>
Notice how the form element spans ALL of the input tags' containers.
XML (XHTML in this case) needs to be well-formed. Take a look at this. You should be able to fix that problem by moving the <form>-tag up in the tree.
Instead of
<div>
<form action="/some_target" method="post">
<input/>
</div>
<div>
<input />
</form>
</div>
do the following (move the form element up, so that it wraps the inputs as well as their containers):
<form action="/some_target" method="post">
<div>
<input/>
</div>
<div>
<input />
</div>
</form>

Resources