How to get page background image behind bootstrap form - css

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

Related

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

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>

Align center in Bootstrap 4 input-group-prepend

I'd like a fixed width input-group-prepend that is larger than the content inside it, but I'd like the content to centered horizontally.
I've tried text-center and align-items-center, but it always seems to be left aligned.
How do I get the content to be in the middle of the input-group-text?
.input-group-text {
min-width: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
</div>
</div>
You need justify-content-center (https://getbootstrap.com/docs/4.2/utilities/flex/#justify-content) because the input-group-text is defined as a flexbox container with a row direction
.input-group-text {
min-width: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text justify-content-center">$</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
</div>
</div>

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>

How do I align Bootstrap inline form labels that don't have an input with those that do?

When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>

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>

Resources