I have searched on the internet and even on this site for the answers but no luck. The problem I am having is the two dropdown button sign in and sign up are displaying both dropdown menu when there are clicked I used the btn-group class to fix this but then the problem arises it doesn't display properly on smaller mobile screens changing it to btn class fixes it just a bit then the issue is the options are displaying horizontally and not being stacked which looks awful. I also tried data-target but that isn't working either any help would be appreciated. Here is a sample of my html and css code.
Code
.navbar {
background-color: #00CED1;
border: none;
}
.navbar-default .navbar-brand {
color: white;
font-family: Tahoma;
font-size: 20px;
font-style: italic;
}
.navbar-left {
width: 70%;
margin-left: -15px;
}
#navForm {
border: none;
}
#loginbtn {
margin-right: 16px;
background: none;
color: white;
border: 2px solid white;
}
#searchbtn {
margin-left: -13px;
background-color: #00b3b3;
color: white;
border-color: #00b3b3;
}
#submitbtn {
width: 100%;
}
#burgerbtn:hover {
background-color: #1673b1;
}
#searchbtn:hover {
background-color: #1673b1;
border-color: #1673b1;
}
#search {
width: 100%;
background-color: #00b3b3;
border: none;
color: white;
}
#password,
#username {
margin-top: 15px;
}
b,
strong {
color: #1673b1;
}
#form {
border: none;
}
#navdiv {
border: none;
}
#form2 input::placeholder {
color: white;
}
#form input::placeholder {
color: white;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.dropdown-menu {
padding-left: 15px;
padding-right: 15px;
}
#media screen and (max-width: 720px) {
b,
strong {
position: absolute;
top: 0.5%;
left: 35%;
}
#navdiv {
width: 80%;
}
.navbar-toggle {
border: none;
}
#navdiv {
width: 165%;
}
.navbar-left {
width: 100%;
}
#loginbtn {
margin-left: 5%;
}
}
#navdiv1 {
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnLyte Connect Share Learn</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app-bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><strong><font color="white">LearnLyte</font></strong></a>
<button id="burgerbtn" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navForm">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navdiv" class="navbar-left navbar-form">
<form id="form">
<div class="form-group col-xs-6">
<input id="search" type="text" class="form-control" placeholder="Search Here...">
</div>
<button type="submit" id="searchbtn" class="btn btn-default">Search</button>
</form>
</div>
<div class="navbar-right form-inline">
<div class=" collapse navbar-collapse navbar-form" id="navForm">
<!--<div>-->
<button id="signupbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign Up</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign Up</b></h4>
</div><br>
<form autocomplete="off">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" id="firstname" tabindex="1" class="form-control" placeholder="Firstname">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" id="lastname" tabindex="2" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" tabindex="3" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" tabindex="4" class="form-control" placeholder="Email">
</div>
</form>
</div>
<!--</div>-->
<!--<div>-->
<button id="loginbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sign In</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign In</b></h4>
</div><br>
<form autocomplete="off">
<div class="form group">
<label for="username">Username</label>
<input type="text" id="username" tabindex="1" class="form-control" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<br>
<div class="form-group">
<div class="text-center">
Forgot password?
</div>
</div>
<br><br>
<div>
<button id="submitbtn" type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
</form>
</div>
<!--</div>-->
</div>
</div>
</div>
</nav>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnLyte Connect Share Learn</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><strong><font color="white">LearnLyte</font></strong></a>
<button id="burgerbtn" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navForm">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navdiv" class="navbar-left navbar-form">
<form id="form">
<div class="input-group">
<input id="search" type="text" class="form-control" placeholder="Search Here...">
<span class="input-group-btn">
<button type ="submit" id="searchbtn"class="btn btn-default">Search</button>
</span>
</div>
</form>
</div>
<div class="navbar-right form-inline">
<div class=" collapse navbar-collapse navbar-form" id="navForm">
<!--<div>-->
<button id="signupbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign Up</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign Up</b></h4>
</div>
<br>
<form autocomplete="off">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" id="firstname" tabindex="1" class="form-control" placeholder="Firstname">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" id="lastname" tabindex="2" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" tabindex="3" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" tabindex="4" class="form-control" placeholder="Email">
</div>
</form>
</div>
<!--</div>-->
<!--<div>-->
<button id="loginbtn" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sign In</button>
<div class="dropdown-menu">
<div class="text-center">
<h4><b> Sign In</b></h4>
</div>
<br>
<form autocomplete="off">
<div class="form group">
<label for="username">Username</label>
<input type="text" id="username" tabindex="1" class="form-control" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<br>
<div class="form-group">
<div class="text-center">
Forgot password?
</div>
</div>
<br>
<br>
<div>
<button id="submitbtn" type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
</form>
</div>
<!--</div>-->
</div>
</div>
</div>
</nav>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Related
I'm new to web designing. PLS help me to create this input fields responsive and also how I put margins in all around like it's in middle(I want get those columns in the middle of the page).
<!DOCTYPE html>
<html>
<head>
<title>Login/Registor</title>
<style type="text/css">
body{
margin:0px;
padding:0;
overflow-x: hidden!important;
}
.containor{
/*text-align: center;*/
margin:225px 3px 5px 3px auto;
}
.form-group input{
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
}
.form-group label{
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons{
margin-top: 20px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
if any one have samples like this create using html,css,bootsrap pls share to get more idea about theses things. Thanks
Is this what you are looking for?
If then add the below style to fix the input moving out of container.
.form-group input {
width: 900px;
max-width: 100%;
}
Working Fiddle
body {
margin: 0px;
padding: 0;
overflow-x: hidden !important;
}
.containor {
/*text-align: center;*/
margin: 225px 3px 5px 3px auto;
}
.form-group input {
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
max-width: 100%;
}
.form-group label {
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons {
margin-top: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
I have been trying to get the last 2 rows to be under the first row but to no avail, I have tried to place the 2 rows under the same container of "Name" Row, but the last 2 rows textboxes turned small instead of going placing right under the first row of "Name" Row. Right now, both of the rows are stuck under the img container.
#output_image {
border-style: solid;
float: left;
position: relative;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: relative;
z-index: -1;
}
.label {
opacity: 0;
}
.inputfile+label {
position: relative;
font-size: 2.5em;
display: inline-block;
color: black;
text-align: center;
padding: 2px 2px;
text-decoration: none;
float: left;
}
.inputfile:focus+label,
.inputfile+label:hover {}
.inputfile+label {
cursor: pointer;
}
.iconplus {
position: relative;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
Instagram Like
</button>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-right" role="document">
<div class="modal-content">
<div class="modal-header ">
<h2 style="font-family: Lato; font-size:29pt; font-weight:bold;" class="modal-title " id="exampleModalLongTitle">Instagram</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal " id="step2">
<div class="form-row" id="comNameAndTypeContainer">
<img id="output_image" height=270px width=270px>
<input class="inputfile" type="file" id="getFile" accept="image/*" onchange="preview_image(event)">
<label for="getFile" <i class="fa fa-plus-circle iconplus" style="position:relative; top:23.1rem; right:3.45rem;"></i> </label>
<!-- Staff name -->
<div class="form-group col-md-5 align-items-center justify-content-center" id="comNameDiv">
<label for="comName" class="fieldHeader"> Name</label>
<input type="text" class="form-control" id="comName" name="comName" placeholder="Enter Name..." required>
</div>
</div>
<!-- Staff identifier -->
<div class="form-row" id="comNameAndTypeContainerr">
<div class="form-group col-md-5" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader">Email/ID</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter Email/ID..." required>
</div>
</div>
<div class="form-row" id="comNameAndTypeContainerrr">
<div class="form-group col-md-2" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader">ID date</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter start ID..." required>
</div>
<div class="form-group col-md-2" id="comIdentifierDiv">
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter End ID..." required>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
I have just swap some of the order of your html and does not included any of my own code in your style css or in your html file.
#output_image {
border-style: solid;
float: left;
position: relative;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: relative;
z-index: -1;
}
.label {
opacity: 0;
}
.inputfile+label {
position: relative;
font-size: 2.5em;
display: inline-block;
color: black;
text-align: center;
padding: 2px 2px;
text-decoration: none;
float: left;
}
.inputfile:focus+label,
.inputfile+label:hover {}
.inputfile+label {
cursor: pointer;
}
.iconplus {
position: relative;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
Instagram Like
</button>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-right" role="document">
<div class="modal-content">
<div class="modal-header ">
<h2 style="font-family: Lato; font-size:29pt; font-weight:bold;" class="modal-title " id="exampleModalLongTitle">Instagram</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal " id="step2">
<div class="form-row" id="comNameAndTypeContainer">
<img id="output_image" height=270px width=270px>
<input class="inputfile" type="file" id="getFile" accept="image/*" onchange="preview_image(event)">
<label for="getFile" <i class="fa fa-plus-circle iconplus" style="position:relative; top:23.1rem; right:3.45rem;"></i> </label>
<!-- Staff name -->
<div class="form-group col-md-5 align-items-center justify-content-center" id="comNameDiv">
<label for="comName" class="fieldHeader"> Name</label>
<input type="text" class="form-control" id="comName" name="comName" placeholder="Enter Name..." required>
<!-- Staff identifier -->
<div class="form-row" id="comNameAndTypeContainerr">
<div class="form-group col" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader">Email/ID</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter Email/ID..." required>
</div>
<div class="form-row" style="padding-left: 5px;" id="comNameAndTypeContainerrr">
<div class="form-group col" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader pl-0">ID date</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter start ID..." required>
</div>
<div class="form-group col" id="comIdentifierDiv">
<label for="comIdentifier" class="text-white fieldHeader">ID date</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter End ID..." required>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
I want Something Like this and how can I achieve this task:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
<div class="col-lg-10 mb-3">
<div class="input-group">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
</div>
</div>
</div>
</form>
add to this css
.mycustom {
border: solid 1px green;
position: relative;
}
.mycustom input[type=text] {
border: none;
width: 100%;
padding-right: 123px;
}
.mycustom .input-group-prepend {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;z-index:9;
}
with one css mycustom class in your input-group class
like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><style>.mycustom {
border: solid 1px green;
position: relative;
}
.mycustom input[type=text] {
border: none;
width: 100%;
padding-right: 123px;
}
.mycustom .input-group-prepend {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;z-index:9;
}</style>
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
</div>
</div>
</div>
</form>
Just make the .input-group-prepend class position:absolute
To prevent overriding the bootstrap styles rename the .input-group-prepend to some other name
.input-group-prepend {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
<div class="col-lg-10 mb-3">
<div class="input-group">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
</div>
</div>
</div>
</form>
see this bootstrap's documentation http://getbootstrap.com/components/#input-groups:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
I have a landing section in my HTML and I have icons below the landing. I can't figure out why the icons keep appearing in my landing div. I've checked for unclosed tags numerous times. I think I need another pair of eyes. Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Fitness Food Tracker</title>
<script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script>
<script src="bundle.js" type="text/javascript" charset="utf-8" defer></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="brand" alt="Brand" src="assets/styles/apple.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<i class="material-icons">account_circle</i> <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sign Up</li>
<li>Sign In</li>
<li class="hidden" id="nav-li-user-stats">Update User Stats</li>
<li class="hidden" id="nav-li-sign-out">Sign Out</li>
<li class="hidden" id="nav-li-change-password">Change Password</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class='landing'>
<!--- Sign Up Form ---->
<form class="form-horizontal hidden" id=sign-up-form>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="credentials[email]" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="credentials[password]" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-6">
<input type="password" name="credentials[password_confirmation]" class="form-control" id="inputPassword3" placeholder="Password Confirmation">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign Up</button>
</div>
</div>
</form>
<!-- Update User -->
<form id='update-user-form' class='hidden'>
<div class="form-group row">
<label for="weight-input" class="col-sm-2 form-control-label">Weight</label>
<div class="col-sm-10">
<input type="" class="form-control" id="weight-input" name="user[weight]" placeholder="Enter Your Weight">
</div>
</div>
<div class="form-group row">
<label for="height-input" class="col-sm-2 form-control-label">Height</label>
<div class="col-sm-10">
<input type="" class="form-control" id="height-input" name="user[height]" placeholder="Enter Your Height">
</div>
</div>
<div class="form-group row">
<label for="age-input" class="col-sm-2 form-control-label">Age</label>
<div class="col-sm-10">
<input type="" class="form-control" id="age-input" name="user[age]" placeholder="Enter Your Age">
</div>
</div>
<div class="form-group row">
<label for="gender-input" class="col-sm-2 form-control-label">Gender</label>
<div class="col-sm-10">
<input type="" class="form-control" id="gender-input" name="user[gender]" placeholder="Enter Your Gender (m or f)">
</div>
</div>
<div class="form-group row">
<label for="activity-input" class="col-sm-2 form-control-label">Activity Level</label>
<div class="col-sm-10">
<input type="" class="form-control" id="activity-input" name="user[activity_level]" placeholder="Enter Acitivty Multiplier">
</div>
</div>
<button type="submit" class="btn btn-primary auth-form-element">
Submit Your Info
</button>
</form>
<!-- Sign In form -->
<form class="form-horizontal hidden" id=sign-in-form>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="credentials[email]" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="credentials[password]" id="inputPassword3" 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>
<div class="jumbotron">
<div class="container">
<h1 class='landing-header'>Fitness Food Tracker</h1>
<h3>An App For Tracking Your Calories and Maintaining Your Physique.</h3>
</div>
</div>
</div>
<!---Below Landing --->
<!-- Food Search-->
<div class="col-md-6 search-input hidden">
<label>Search For Food</label>
<div class="input-group">
<input type="text" id='search-input-field' class="form-control" placeholder="Search for foods">
<span class="input-group-btn">
<button class="btn btn-primary" id='food-search-btn' type="button">Search!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<!-- Meal Builder Display-->
<div id="meal-content" class='hidden'>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Search Results</li>
<li>Your Meal</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div class="search-table table-responsive table-bordered hidden">
</div>
</div>
<div class="tab-pane" id="orange">
<div class="meal-table table-responsive table-bordered hidden">
<table class="table table-condensed">
<tr>
<th class='hidden'>id</th>
<th>Description</th>
<th>Calories</th>
<th>Grams Per Serving</th>
<th>Fat Mono</th>
<th>Fat Poly</th>
<th>Fat Sat</th>
<th>Carbs</th>
<th>Sugar</th>
<th>Fiber</th>
<th>Protien</th>
<th>Sodium</th>
<th>Cholesteral</th>
</tr>
</table>
</div>
<label> Meal Macro Totals</label>
<div class="meal-total-table table-responsive table-bordered hidden">
<table class="table table-condensed">
</table>
</div>
</div>
</div>
</div>
<div class='col-md-4 icon-div'>
<i class="material-icons icon">create</i><br>
Log Your Meals
</div>
<div class='col-md-4 icon-div'>
<i class="material-icons icon">fitness_center</i><br>
Maintain Your Fitness
</div>
<div class='col-md-4 icon-div'>
<i class="material-icons icon">track_changes</i><br>
Track Changes Over Time
</div>
</body>
</html>
EDIT:
Here is my CSS:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
#import '~bootstrap-sass/assets/stylesheets/bootstrap';
$orange: #EB8921;
$lite-orange: #F5AD28;
$white: #FFFFFF;
$gray: #2E2F2F;
$darker-gray: #1E1E1E;
$black: #000000;
body {
font-family: 'Montserrat', sans-serif;
background-color: $gray;
color: $lite-orange;
};
.landing {
background-image: url("http://wallpapercave.com/wp/EnDM8YS.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
min-width: 100%;
margin-top: 5%;
height: 600px;
}
form {
width: 40%;
margin: 0 auto;
}
#meal-content {
margin-top: 8%;
}
.landing-header {
color: $orange;
}
.icon-div {
text-align: center;
background-color: $gray;
}
.icon {
padding-top: 10%;
font-size: 8em;
color: $white;
margin-bottom: 5%;
}
.jumbotron {
background: rgba(0, 0, 0, 0);
text-shadow: .25px 0 0 $black, -.25px 0 0 $black, 0 .25px 0 $black, 0 -.25px 0 $black, .25px .25px $black;
padding-top: 10%;
padding-bottom: 30%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 10%;
}
.btn-primary {
background: $orange;
border-color: $black;
}
.table-responsive {
max-height: 400px;
overflow: auto;
font-size: .75em;
margin-left: 5%;
margin-right: 5%;
background-color: $darker-gray;
margin-bottom: 10%;
}
.input-group-sm {
min-width: 50px;
}
.search-input {
margin-bottom: 10%;
padding-top: 10%;
float: none;
margin-right: auto;
margin-left: auto;
}
.add-food-btn {
border-radius: 100%;
}
.table {
border: $black;
}
.a.dropdown-toggle {
padding: 0 !important;
}
.brand {
height: 100%;
margin: 5%;
}
.navbar-brand {
padding: 0;
margin-bottom: 5%;
}
The problem here is that the icons end up behind the navbar because the navbar is fixed. Simply adding padding-top to the body should create some whitespace under the navbar and fix your problem.
I want to center a form containing two inputs(username and password):
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
but when I run the page, the form isn't in the center of the page. I added in the style.css:
.form-horizontal{
display:block;
margin-left:auto;
margin-right:auto;
}
but that didn't work.
To center a div on the page, you need to set the width of your container, then apply margin:0 auto; to it and it will center left and right on the page.
.form-horizontal{
display:block;
width:50%;
margin:0 auto;
}
If you want to center text, just add text-center to the class of the div your text is in. Bootstrap will do the rest.
Edit 1
<div class="contact-form">
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
Slim Hmidi Hi there, You were close with your class of .form-horizontal.
Using this will center the form in the middle of the page.
.center {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
You will just now need to adjust the col-sm-xx within the form to fill and work correctly at all screen sizes.
Here is a screenshot, the blue div that holds the form is centered horizontally.
Here is the form with the classes in the form changed to fill and work on all screen sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>How to center a form using Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 300px;
padding-top: 15px;
background-color: darkorange;
}
.block2 {
min-height: 160px;
padding-top: 15px;
}
.center {
position: absolute;
/* top: 0;
bottom: 0; */
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="row col-xs-6 block2 bg-primary center">
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" >
<label class="control-label col-sm-3" for="username">username<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">password<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Wrap the whole form in <div class="container">your form HTML</div>.
Like this: http://codepen.io/anon/pen/pJLrOq. Code centers form container to the middle of a site. Edit a CSS and input text's classes to get the layout you want.
You can add text-align: center; in css .