I am making this simple form using bootstrap but there seems to be a big margin below the .help-block class. How can I remove it without affecting the responsiveness or am I doing something wrong?
.user-help {
background: red;
color: white;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<form class='form-horizontal'>
<div class='form-group'>
<input id='fname' type='text' class='form-control' placeholder='First Name'>
<div class='help-block user-help'>First name missing</div>
</div>
<div class='form-group'>
<button type='submit' class='btn btn-primary btn-block'>Sign Up</button>
</div>
</form>
</div>
Apply margin-bottom: 0; to .user-help and .form-group specifying their parent div class.
.form-group .user-help {
background: red;
color: white;
text-align: center;
margin-bottom: 0;
}
.form-horizontal .form-group {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<form class='form-horizontal'>
<div class='form-group'>
<input id='fname' type='text' class='form-control' placeholder='First Name'>
<div class='help-block user-help'>First name missing</div>
</div>
<div class='form-group'>
<button type='submit' class='btn btn-primary btn-block'>Sign Up</button>
</div>
</form>
</div>
A big margin below the .help-block class, There are two reasons:
.form-group has style with margin-bottom: 15px;
.help-block has style with margin-bottom: 10px;
You can change or remove margin-bottom value of either the first .form-group class or .help-block class.
Related
.surveyform-class {
background: yellow;
margin: 0 25%;
width: 50%;
border-right: 40px solid yellow;
}
.main-div{
background: lightgrey;
width: 50%;
height:100%;
margin: 0 25%;
border-right: 20px solid yellow;
border-left: 20px solid yellow;
}
form {
/* Center the form on the page */
margin: 0 auto;
width: 400px;
}
form >div {
margin-top: 1em;
}
form >div >div {
padding-left: 95px;
}
label{
width: 90px;
text-align: right;
display: inline-block;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div style="
text-align: center;">
<h1 class="surveyform-class">Survey Form</h1>
<div class="main-div">
lwt us know how we can improve freecode camp
<form >
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div >
<label>
which option best describes your current role
</label>
<select >
<option>student</option>
<option>engineer</option>
</select>
</div>
<div >
<label>
Things that should be improved in future
</label>
<input type="checkbox" name="a">
<span> Front end projects</span>
<div>
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div>
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I am trying to align these select element and labels to start at same line.
Can someone help me ?
Here is jsfiddle link : http://jsfiddle.net/v650o2dL/2/
Use the css property vertical-align:top. Be sure to separate the containers of the left and right containers like I did below;
.yellow {
background: yellow;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
.yellow>h1 {
text-align: center;
}
.grey {
background: lightgrey;
height: 200px;
}
.row {
width: 100%;
display: block;
margin-bottom: 10px;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
.input-group {
display: block;
margin-bottom: 10px;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="yellow">
<h1>Survey Form</h1>
<div class="grey">
<center>
Let us know how we can improve freecode camp
</center>
<br>
<form>
<div class="row">
<div class="left">
<label>
Which option best describes your current role
</label>
</div>
<div class="right">
<select>
<option>student</option>
<option>engineer</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label>
Things that should be improved in future
</label>
</div>
<div class="right">
<div class="input-group">
<input type="checkbox" name="a">
<span> Front end projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
How to put a awesome icon font inside the bootstrap input type text aligned at left and with some margin-right relative to the placeholder text using bootstrap? Im doing like this: https://jsfiddle.net/tbeay2vd/1/ and using the bootstrap class "input-group-addon" it works but I would like to have a input text like:
Do you know how to do that using bootstrap?
Html:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- How to do this input text below using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i> Search..
</div>
</div>
</div>
</div>
Try this:
$('input').on('focus', function () {
$(this).parent().addClass('active');
});
.example {
margin-top:30px;
border:1px solid gray;
border-radius:4px;
padding:15px;
}
.example >i {
margin-right:10px;
}
.search-input {
border: none;
width: 90%;
}
.search-input:focus{
outline: none;
}
.example.active {
border-color: #80bdff;
}
.search-box .input-group-addon {
background: none;
}
.search-box input {
border-left: none;
}
.search-box.active .input-group-addon {
border-color: #80bdff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group search-box">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- Hpw to do this layout using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i>
<input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
.input-group >.fa{
position: absolute;
z-index: 10;
top: 37%;
left: 20px;
}
.input-group .form-control{
padding-left: 40px;
height: 60px;
border: black solid 1px;
position: relative;
border-radius: 5px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
I am using bootstrap 3. Here is my code
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="form-title">Apply for Plan</div>
<div class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
And it produces this layout
You can see the title 'Apply for Plan' does not align with the form controls on the left hand side.
it is because of these settings by Bootstrap
margin-left: -15px;
margin-right: -15px;
I can fix this issue by adding them too to my css class .form-title and .divisionify
However is there a better way to fix the alignment?
This is my desired layout
Why not just override the Bootstrap styles with your own?
Add this to your code:
.form-group {
margin-right: 0 !important;
margin-left: 0 !important;
}
Give a padding of the left and right of the .form-title and .divisionify
.divisionify {
margin-left: -15px;
margin-right: -15px;
}
.form-title{
margin-left: -15px;
margin-right: -15px;
}
Check live
The problem with using the !important thing is that everything will end up being important to you. I would use parent-to-child calls example:
#father.child{margin-right: 0px; margin-left: 0px;}.
With this, you will govern without using the !important. Think that using the !important you are going to change the default responsive of Bootstrap to the whole page for this case.
DOC:What are the implications of using "!important" in CSS?
You can add an additional id to the elements and style them according to your wish. In this way you can avoid !important. This is the way preferred by me.
Edited code snippet
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
#applyPlan {
margin-left: -15px;
margin-right: -15px;
}
#division {
margin-left: -15px;
margin-right: -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div id= "applyPlan" class="form-title">Apply for Plan</div>
<div id="division" class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
How to make the text input stretch as well when hiding sidebar?
Look at example on jsFIDDLE
html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div class="form-group">
<label for="idf">Name: </label>
<input type="text" class="form-control" id="idf" aria-describedby="h">
<span id="h" class="help-block"></span>
</div>
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both">/div>
</form>
</div>
</div>
</div>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 3px; height:38px;}
#cc {margin-left: 5px; height:38px}
#bb {margin-right: 20px; float:right}
When you hide the sidebar you will see the content moving to the left. There is one text input and I don't know how to make that input stretch with jumbotron. I'd like to be able set the min width as well.
Second question: is there a better way to make all elements inline and horizontally aligned? I had to separate checkbox from label and do it as you can see.
I found some information in other sources and put it all together. It seems to be working fine. So far nobody was able to answer my question (it isn't that simple), but still if someone knows a better way and cleaner of doing this, I'd like to learn how to do it better. This is what I did:
html:
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div id="cell-1">
<label for="idf">Name:</label>
</div>
<div class="form-group" id="cell-2">
<input type="text" class="form-control" id="idf" aria-describedby="h" style="width:100%">
<span id="h" class="help-block">Warning: this field can't be empty!</span>
</div>
<div id="cell-3">
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both"></div>
</div>
</form>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
#cell-1 {display: table-cell; vertical-align:top; padding-top:7px}
#cell-2 {display: table-cell; width:50%; padding-left:5px}
#cell-3 {display: table-cell; width:50%}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 7px; height:38px;}
#cc {margin-left: 5px; padding-top: 4px; height:38px}
#bb {margin-right: 20px; padding-top: 4px; float:right}
.help-block {font-size: 12px;color:red}
Updated example on jsFIDDLE.
I've got a jumbotron class which has to contain a button, but it's strangely extended and that button looks ugly. Why is that so?
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok">
Why is this button so wide?
</span>
</button>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
If I try to reduce the size of the column, for example, col-md-4, nothing changes.
Your mistake is you wrote the text inside icon span. Here is the fixed code
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Why is this button so wide?
</button>
</div>
</div>
</div>
</div>
in main page use this...
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome!!!</div>
<div class="intro-heading">Let's Get Started</div>
Tell Me More
</div>
</div>
</header>
in css
use this
.btn-xl {
padding: 20px 40px;
border-color: #fed136;
border-radius: 3px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
background-color: #fed136;
}
this will solve your problem