I have this problem whereby my page style with bootstrap div container for the sign in forms and top portion logo, this part however covered or blank out my intended background image styled using CSS
html{
background: url("Bg1.jpg")no-repeat center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
margin:0;
}
and my the 2 containers where I place a logo on top and the sign in form in the middle
<div class="container"><!--top portion-->
<div class="row"> <!--logo portion-->
<div class="col-sm-3 col-xs-12">
<img class="image-responsive img-rounded" alt="B-Flight" src="Logo1.png" id="banner" />
</div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
</div><!--row-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4"></div><!--left column of whole page-->
<div class = "col-xs-12 col-sm-4">
<title>Login</title>
<form class="form-signin">
<h2 class="form-signin-heading align-center">Sign In</h2>
<label for="usrName" class="Titlefont">User Name</label>
<input type="text" id="usrName" class="form-control" placeholder="user name" required autofocus><br>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<br>
<button class="btn btn-link btn-block" type="button">Not registered? Sign up now</button>
</form>
</div><!--set alignment-->
<div class="col-xs-12 col-sm-4"></div><!--right column of the page-->
</div><!--row-->
</div> <!-- /container -->
And there photo of it screen shot
Appreciate if anyone be able to help out
Thanks
By default the background-color of body is set to white.
So when you style your html the body is not targeted and still white.
You might instead want to try using
html, body {
/* Your CSS goes here */
}
This should solve your problem.
Related
I have a bootstrap panel in which I am setting the opacity, but it is not working.
Background image is all set good. But a panel in the side needs to be transparent... rather translucent (50%). Its not happening. I have tried the opacity.
Below is the code:
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-primary halfOpacity">
<div class="panel-body">
<!-- <div class="card border-primary mb-3">
<div class="card-block special-card"> -->
<p>
<div class="image" style="text-align:center;">
<img src="dise-resized.png" alt="DISE">
</div>
</p>
<p><br></p>
<p>
<div class="input-group">
<span class="input-group-addon info">Username:</span>
<input type="text" id="username" name="username" class="form-control" placeholder="Enter NTID" required>
</div>
</p>
<p>
<div class="input-group">
<span class="input-group-addon info">Password:</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Enter password" required>
</div>
</p>
<p>
<button class="btn btn-primary btn-block" type="submit">Login</button>
</p>
<!--</div>
</div> -->
</div>
</div>
</div>
And the CSS looks like:
div.halfOpacity {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
Below is the screenshot what it looks like now.
I need the white background to be translucent.
You can use !important sometimes some classes cuz this problem or try backgroud-color:transparent
div.halfOpacity {
opacity: 0.6 !important;
// or background-color:transparent;
}
I am having some issues with a div not responding the way I believe it should be.
I have this code;
<div class="wrapper">
<div class="container">
<div class="col-md-12">
<div class="header-form" style="border: 2px solid purple; margin: 1%;">
<div class="row">
<form ng-controller="GetQuery" ng-submit="submitForm()">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Starbucks, McDonalds, etc..</label>
<input ng-model="form.keyword" type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">City, State or Zip..</label>
<input ng-model="form.location" type="text" class="form-control">
</div>
</div>
<div class="col-md-2">
<button type="submit" ng-click="Submit" href="#!view1" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Lets Go!</button>
</div>
</form>
</div>
</div>
</div>
</div>
This works correctly. However all I know want to do, is fix this div that contains the form into position: fixed, so when you scroll the div continues to stay in view. However, when I had an in-line style
style="position: fixed;"
and I inspect it with a mobile view the div defaults to only using half the page. In a desktop view it works as it should.
What am I missing?
<div class="row">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
After this code i got scroll bar in my browser so i inspect and found that if i make change
.row { margin-right: 0;}
it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is
.row{margin-right: -15px;}
EDIT: Code is formatted like code now
As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.
First rule of bootstrap introduction says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Code should look:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.
I am using a bootstrap theme for a personal website. In the contact section I am trying to replace a form (that comes with the theme) with an image of where I live.
The problem is that the image does not render in the centre of the page (the form does):
Here is the HTML for the form:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="contact-form" role="form">
<div class="ajax-hidden">
<div class="form-group wow fadeInUp">
<label class="sr-only" for="c_name">Name</label>
<input type="text" id="c_name" class="form-control" name="c_name" placeholder="Name">
</div>
<div class="form-group wow fadeInUp" data-wow-delay=".1s">
<label class="sr-only" for="c_email">Email</label>
<input type="email" id="c_email" class="form-control" name="c_email" placeholder="E-mail">
</div>
<div class="form-group wow fadeInUp" data-wow-delay=".2s">
<textarea class="form-control" id="c_message" name="c_message" rows="7" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s">Send Message</button>
</div>
<div class="ajax-response"></div>
</form>
</div>
</div><!-- .row -->
Form in Chrome dev tools:
Here is how my code looks:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<img src="assets/images/staticmap2.png">
</div>
</div><!-- .row -->
Image in Chrome dev tools:
I have tried changing the size of the image and different offset sizes to no avail. I'm at a loss how to resolve this - can anyone help?
Adding the class center-block to your image will apply margin:0 auto; and should center the image in it's parent div.
<img class="center-block" src="assets/images/staticmap2.png">