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 use twitter bootstrap and its cover example as the base. I added a few input fields there and would like to have second (email) to be located in the middle (i.e. horizontally aligned). I've tried to add .center-block and .text-center to different div elements, but it didn't help. What should be the solution?
Here is the code:
<p class="lead">Some other text to demonstrate something else</p>
<div class="lead">
<div class="form-group">
<div class="text-center center-text">
<div class="input-group input-group-lg">
<input type="email" class="form-control" id="email">
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-secondary" id="analyze" data-loading-text="Wait...">Analyze</button>
</div>
and here is the jsfiddle.
remove class input-group like below:
<div class="input-group-lg">
<input type="email" class="form-control" id="email">
http://jsfiddle.net/fwz0w44n/
I can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.
They need to be center aligned.
This is what I want it to look like...
This is what is happening...
Here is my current code.
<div>
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
I have created this js fiddle...
https://jsfiddle.net/ptwbn2av/
Thanks!
You could also try the pull-left class.
The classes .pull-left and .pull-right also exist and were previously
used as part of the media component, but are deprecated for that use
as of v3.3.0. They are approximately equivalent to .media-left and
.media-right, except that .media-right should be placed after the
.media-body in the html.
The html:
<div>
<div class="pull-left">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
You can use:
style="margin-right:5px"
to add some spacing after the div, and then the new mark-up would be as follows:
<div>
<div class="pull-left" style="margin-right:5px">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
With your current code, you can use the flexbox.
A powerful CSS layout module that gives us an efficient and simple way to lay out and align things.
<div class="flex">
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
.flex {
display: flex;
flex-direction: row;
}
This is the screenshot of the result:
You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Cheers!
divs are block elements, which means that they align vertically. For example,
<div>
Hello World!
</div>
<div>
Goodbye World!
</div>
would result in:
Hello World!
Goodbye World!
So, in order to make the elements flow horizontally, you have to make the div inline because inline elements can flow horizontally, such as text and <span>.
You can add a rule to your css:
#delete-button {
display:inline-block;
}
And of course, you should add an id attribute to the button.
If the above doesn't work, you should consider putting all the elements in one div because <button>, <input>, and <span> are all inline elements.
Just add the grid classes. Try this
<div>
<div class="col-xs-2">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
https://jsfiddle.net/xbu9qtje/
Here one solution to the problem.
<div class="container">
<div class="input-group">
<button class="btn btn-outline-primary border-left-0 border" type="button">
Delete
</button>
<input type="text" class="form-control py-2" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
You can see the output at this link: codeply.com/p/xijLBe2vff.
Try the form-inline class in the root div, it will default to "inline" putting your fields one next to the other:
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn">Delete</button>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
you can just put
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #disabled = "true", #class = "input-group-addon", #style = "width:50px;text-align:center;" } })
<div class="col-md-12">
<div class="col-md-1">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-md-11">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
Bootstrap: how can i make the panel-body align in center, but with the input-label align with left side of input text box?
<div class="panel panel-default">
<div class="panel-body" align="center">
<form role="form" id="password-form">
<div class="form-group full-width">
<label class="input-label" for="userId">Username <Id></Id>:</label>
<div class="input-group min-width-400">
<input class="form-control" type="text"
id="userId"
name="userId"
required="true"/>
</div>
</div>
<button id="closeBtn" type="button" class="btn btn-default">Cancel</button>
<button id="resetBtn" class="btn btn-primary" type="button" style="width:150px">Reset Password</button>
</form>
</div>
</div>
If I understand you well, you´re looking for .panel-body {margin: 0 auto; width: xxx} instead of your align attribute..
I have the following code...
<div class="row">
<div class="span6">
<h2>Some Text</h2>
</div>
<div class="span6">
<form class="form-inline pull-right">
<input type="text" class="input-large">
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
...but the search form doesn't align with the h2 tag. Do I need to have the form custom styled via css or am I missing out on some default Bootstrap class to fix this?
Thanks so much for taking time to read/answer this query.
[edit]
http://jsfiddle.net/nuB23/
Added jsfiddle
Try to add this style:
[class*="span"], h2 {
display: inline;
}
Updated Fiddle
Remove the pull-right class on the form.
The other issue is the h2 has extra padding and is a block level. I think what you are really after is this:
<div class="nav"> </div>
<div class="container">
<form class="form-horizontal ">
<div class="control-group ">
<label class="control-label large" for="searchInput">Label text:</label>
<div class="controls search">
<div class="input-prepend "> <span class="add-on"><i class="icon-search"></i></span>
<input type="text" id="searchInput" />
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</form>
</div>
http://jsfiddle.net/dbrin/AV654/