I'm trying to build what I have attached in the image but unfortunately I cannot get it to sit right, so far this is my HTML (I'm new to bootstrap)
<div class="row">
<div class="container">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<p class="text-center">
<strong>Enter your email and get special information</strong>
</p>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "form-inline col-lg-12" }))
{
<div class="input-group col-lg-9" style="margin-left: 3%">
<input type="text" class="form-control">
</div>
<div class="input-group col-lg-2">
<button class="btn btn-primary">Submit</button>
</div>
}
</div>
<div class="col-lg-3">
</div>
</div>
</div>
which is meant to look like this
but instead looks like this, Ideally I would like the button in a bit closer to the text box
but when I view it on a mobile screen I get this mess
Any help would be appreciated.
What about this fiddle:
http://jsfiddle.net/jwyr6Lwh/1/
.custom input.form-control {
border: 1px solid #848484;
-webkit-border-radius: 30px !important;
-moz-border-radius: 30px !important;
border-radius: 30px !important;
-moz-box-shadow: 2px 2px 1px #666;
-webkit-box-shadow: 2px 2px 1px #666;
box-shadow: 2px 2px 1px #666;
outline:0;
padding-left:10px;
padding-right:0px;
background-color: rgba(255,255,255,0.2);
}
.custom button {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
The reason why it is displayed different on a mobile Browser is its responsiveness
class="col-lg-2"
means that on an large device it will be displayed in two collumns otherwise one by one under the other. If you don't intend this take class="col-sg-2".
How's this?
http://jsfiddle.net/ytn7z6tc/4/
<h3 id="btn-groups-single">Input + Button</h3>
<div class="input-group">
<input type="text" class="form-control " placeholder="email address">
<div class="input-group-btn">
<button type="button" class="btn btn-primary">
Submit
</button>
</div>
</div>
Related
I have a row of divs:
row of divs
When I decrease the window size they move down and stack on top of one another
divs stacked on top of one another
another example of the divs stacked
Instead of having them move down one by one as the window size gets smaller I want them to all move down together to the next row like so:
how I would like the divs to display
How would I go about doing this using divs? or if there is another method (like flex boxes) please let me know. Thanks!
Here is all the relevant code:
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:white;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
CSS:
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
you need to consider a few points
you need to make div responsive in small screen devices by adding col-12 before col-md-6.
if you're using bootstrap then learn it well and you don't need to use inner css.
replace this:
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
with this:
<div class="col-12 col-md-6 pricing-boxes">
<div class="pricing-box"><h2><b>$1495</b></h2><h6>MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$1495</b></h2><h6>NON-MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$2000</b></h2><h6>VIPS</h6></div>
</div>
Use #media and when size of screen is reduced to specific size then apply width: % to class .pricing-boxes like used in below snippet.
Use padding and margins according to need
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
#media screen and (max-width: 900px) {/*Value may be from where it start stacking*/
.pricing-boxes{
width: 100%;
/*adjust padding and margin according to need*/
}
}
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:black;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">MEMBERS</p>
</div>
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p>
</div>
<div class="pricing-box">
<p style="font-size:50px"><b>$2000</b></p>
<p style="font-size:23px; margin-top:-30px">VIPS</p>
</div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
I am trying to do one of the most basic things in CSS. A hover state for one of my buttons, but for some reason, it's not doing anything! What is going on with it?
Task info
<label>Your Note:</label><br/>
<input type="text" id="noteTitle" placeholder="Note Title..."><br/>
<textarea id="note" placeholder="Add Content..."></textarea> <br/>
<button onclick="createNote()" class="btnStyle">Create Task</button>
<br/> <br/>
<label>Note Id:</label><br/>
<input type="text" id="noteId" placeholder="Type Note Id..."> <br/>
<div class="align"><button onclick="deleteNote()" class="btnStyle">Delete Task</button></div>
<div id="noteTitlesId"></div>
<div class="align"><button onclick="getNoteTitles()" class="btnStyle">Get Task Titles</button></div>
<div class="align"> <button onclick="updateNote()" class="btnStyle">Update note</button></div>
</div>
My CSS for it:
.btnStyle {
border: 0.5px solid gray;
border-radius: 5px;
background-color: transparent;
}
.btnStyle :hover {
background-color: #eb9356;
color: #ffff;
}
Don't Give space between .btnStyle :hover remove that one space and code for that is below:
.btnStyle:hover {
}
How do I place the two input fields close to each other when they have shorter widths on larger screen. The problem is that I want the input fields to be in one line with shorter widths. I eventually achieve that but then on shorter screens it stacks up even though it has enough space to be in one line. Here is the demo.
What I would like to have: Keep the input fields in one line as long as there widths fit in the viewport or else, stack them up with full width.
NOTE: I have just started learning bootstrap and not well versed with all the classes.
HTML
<div class="site-wrapper">
<div class="jumbotron">
<h1>Header</h1>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="input-group-lg">
<input id="user" class="form-control form-inline" placeholder="Your name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="input-group-lg">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #fff;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
margin: 0;
}
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.jumbotron {
background-color: #ccbb99 !important;
/*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
height: 100%;
margin-bottom: 0;
}
.jumbotron h1 {
font-family: chalkitup, "sans-serif";
color: #69350F !important;
}
#user, #boardSize {
max-width: 280px;
}
To prevent stacking you should use col-xs-*.
If you combine with pull-right and pull-left then you can choose where you want to place your input in the grid. Notice the use of form-inline class
<form class="form-inline">
<div class="col-xs-6">
<div class="form-group pull-right">
<div class="input-group-lg ">
<input id="user" type="text" class="form-control form-inline" placeholder="Your name">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group pull-left">
<div class="input-group-lg ">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</form>
DEMO
I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.
I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.
My code is like this:
<div class="container">
<div class="row">
<div class="form-group col-lg-4">
<label class="control-label">Name</label>
<input id="txtName" class="form-control input-sm" />
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I don't want to use input group.
Please suggest an alternate way or alternate html with css.
Here are three different ways to do it:
Here's a working Demo in Fiddle Of All Three
Validation:
You can use native bootstrap validation states (No Custom CSS!):
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess2">Name</label>
<input type="text" class="form-control" id="inputSuccess2"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box
Input Group:
You can use the .input-group class like this:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box
Unstyled Input Group:
You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.
Use a normal input group but add the class input-group-unstyled:
<div class="input-group input-group-unstyled">
<input type="text" class="form-control" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Then change the styling with the following css:
.input-group.input-group-unstyled input.form-control {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
Also, these solutions work for any input size
Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.
.input { width: 90%; }
.input-icon {
display: inline-block;
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
color: #000;
font-size: 12px;
font-weight: bold;
margin-left: 4px;
}
EDIT
Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css
<input type="text" name="whatever" id="funkystyling" />
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path/to/icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}
I liked #KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:
css
.input-group.input-group-unstyled-right input.form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
html
<div class="input-group input-group-unstyled-right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input type="text" class="form-control">
<span class="input-group-addon input-group-addon-unstyled">
<i class="fa fa-check"></i>
</span>
</div>
You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.
Here's an example, using Font Awesome for the search icon:
.search-box-container input {
padding: 5px 20px 5px 5px;
}
.search-box-container:after {
content: "\f002";
font-family: FontAwesome;
margin-left: -25px;
margin-right: 25px;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-box-container">
<input type="text" placeholder="Search..." />
</div>