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">
Related
I'm using Bootstrap 3 and I have set up this grid for my webpage:
<div class="container">
<div class="header">
<div class="top-nav">
<div class="row">
<div class="col-1">
<img src="https://sitename.com/logo.jpg">
</div>
<div class="col-7 mid-nav">
<!-- Search box & Navbar comes here -->
</div>
<div class="col-1" style="margin-top:30px !important;">
<i class="fa fa-shopping-cart fa-4x sabad-kharid"></i>
</div>
<div class="col-3">
<form method="POST" action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
And the result is shown in this:
As you can see the Bootstrap form does not appear in the col-3 class and it appears at the below of this row. However it should be placed at the left side in the div with class of col-3.
So what's going wrong here? How can I solve this issue?
You should use col-xs-1 col-xs-7 col-xs-3 in your class (instead col-7) or any size and display what you want.
Here's what I mean.
I have a log in button on the top right of the page, and the title of the page centered in the middle.
However, the only way I found to center the tile on the div, was the center the div itself on the page, which was col-md-9.
I tried using CSS to center the Div, but I couldn't make it work, so the workaround I found was the center the div by using another column before the column where the Title is positioned.
However, this new div is completely empty. I might put a logo in it later on, but I planned for the top right of the page to be empty.
Is there something bad with having empty divs?
Is there a better way to implement this?
Code for reference.
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 id="TEXT">OH SNIP</h1>
<br>
</div>
<div class="col-md-3">
<div class="dropdown">
<button id="dpBt" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<form id="logIn" action="api/users" method="POST">
<div class='form-group'>
<label for='username' class='sr-onl'>Username</label>
<input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
</div>
<div class='form-group'>
<label for='password' class='sr-onl'>Password</label>
<input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
</div>
<div class='form-group'>
<button id="btnLogin" class='btn btn-block'>Login</button>
</div>
</form>
<hr>
<input id="btnRegisto" type="button" class="btn btn-block" value="Sign up">
<br>
</div>
</div>
</div>
</div>
You could leave blank columns, but a better approach provided by Bootstrap is to use offsets.
Here is an example from Bootstrap 3.3
https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Here's an example that better fits what your trying to do. Notice the offset for the button.
<form class="form-horizontal" method="post" action="/login/">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="id_username" name="username" value="" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" value="" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
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.
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 having trouble with boostrap 3 causing deactivated/read-only inputs in desktop mode. Once you resize the browser window to a smaller size bootstrap activates the inputs to read-write. I am clueless why, of course they should be activated on all devices. Any help will be appreciated!
I tried having the .form-group arround the .col-sm-x .col-md-x .col-lg-x divs and a few other tweaks, the inputs only enable once they are completely outside of the .col-sm-x .col-md-x .col-lg-x, which destroys the layout. Is there any way of making this layout work in bs3?
Here's a fiddle, problem shows up in Safari, Firefox and Chrome:
http://jsfiddle.net/Au5vM/3/
The form code looks like this, I am not so familiar with bs3 forms and grid, maybe someone might spot the problem:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<div class="form-group">
<label for="inputAcademicTitle">Degree</label>
<input type="text" class="form-control" id="inputAcademicTitle" placeholder="Titel" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputFirstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your first name" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputLastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Your last name" value="Resizing causes me to disable">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="inputMotto">Comment</label>
<textarea class="form-control" rows="3" id="motto" placeholder="Your comment">textareas are not affected</textarea>
</div>
</div>
</div>
</div>
</form>
They're not disabled. The problem is that you're nesting class="row". You can verify this by opening your browser's web tools, you'll see that the row containing the textarea overlaps the textboxes.
</div>
<div class="row">
should become
</div>
</div>
<div class="row">
And
</div>
</form>
should become
</form>