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>
Related
I haven't been able to figure out how to implement their tips into my styling. How can I get my label to be on the left of my input, on the same line? Also I'm just learning how to code so sorry for the inevitable sloppy-ness. This is my code:
body {
background-color: #f5f5f5;
;
}
.rng_box {
background-color: white;
width: 70%;
max-width: 800px;
left: 50%;
top: 460px;
border-radius: 20px;
padding: 20px;
position: absolute;
transform: translate(-50%, -50%);
box-shadow: 0px 2px 6px 2px #E5E5E5;
border: solid 3px #DEDEDE;
}
.title {
text-align: center;
}
.form-control {
width: 180px;
height: 30px;
margin-left: 45px;
}
.btn {
margin: 1px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="rng_box">
<h1 class="title">Random Number Generator</h1>
<div>
<form id="minAndMax">
<label for="min">Minimum:</label><br>
<input type="number" id="min" name="min" class="form-control" value="1">
<label for="max">Maximum:</label><br>
<input type="number" id="max" name="max" class="form-control" value="10">
<br>
<div class="buttons">
<button type="button" class="btn btn-success" onclick="generateRN()">Generate 🎉</button>
<button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
<button type="reset" class="btn btn-primary">Clear</button>
</div>
</form>
</div>
<hr>
<h1 id="rng_answer">0</h1>
</div>
It's easy, wrap your label and input inside a div and use flex.
https://www.w3schools.com/css/css3_flexbox.asp
Check the code below:
.label-wrap{
display:flex;
}
<div class='label-wrap'>
<label for="min">Minimum:</label><br>
<input type="number" id="min" name="min" class="form-control" value="1">
</div>
The reason is that .form-control css class has a display: block property in the _forms.scss file.
Such a property automatically makes the component goes to a new line. You can use display: inline-block !important instead and you will see the input going on the same line as the label.
In addition to this, you have also <br> tags right next your label tag to be removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="RNG.css">
<title>Random Number Generator</title>
<link rel="icon" type="image/png" href="/Users/trippyrock/Desktop/ToolScape/favicon.png">
<style>
body {
background-color: #f5f5f5;;
}
.rng_box {
background-color: white;
width: 70%;
max-width: 800px;
left: 50%;
top: 460px;
border-radius: 20px;
padding: 20px;
position: absolute;
transform: translate(-50%,-50%);
box-shadow: 0px 2px 6px 2px #E5E5E5;
border: solid 3px #DEDEDE;
}
.title {
text-align: center;
}
.form-control {
width:180px;
height:30px;
margin-left: 45px;
display: inline-block !important;
}
.btn {
margin: 1px;
}
</style>
</head>
<body>
<div class= "rng_box">
<h1 class="title">Random Number Generator</h1>
<div>
<form id="minAndMax">
<label for="min">Minimum:</label>
<input type="number" id="min" name="min" class="form-control" value="1">
<br>
<label for="max">Maximum:</label>
<input type="number" id="max" name="max" class="form-control" value="10">
<br>
<div class="buttons">
<button type="button" class="btn btn-success" onclick="generateRN()">Generate 🎉</button>
<button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
<button type="reset" class="btn btn-primary">Clear</button>
</div>
</form>
</div>
<hr>
<h1 id="rng_answer">0</h1>
</div>
<script src="RNG.js"></script>
</body>
</html>
if you are using bootstrap. you can use the bootstrap forms with other utility classess.
<div class="shadow-sm w-75 mx-auto mt-4 p-3 rounded-lg mw-75 text-center">
<h1>Random Number generator</h1>
<form class="form-horizontal" id="minAndMax">
<div class="form-group row">
<label class="col-4 col-form-label">Minimum:</label>
<div class="col-8">
<input type="number" id="min" name="min" class="form-control" value="1" />
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label">Maximum:</label>
<div class="col-8">
<input type="number" id="max" name="max" class="form-control" value="10" />
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-success mr-2" onclick="">Generate 🎉</button>
<button type="button" class="btn btn-danger mr-2" onclick="">Ignore Fields</button>
<button type="reset" class="btn btn-primary" onclick="">Clear</button>
</div>
</form>
</div>
Following is the HTML content inside <body> tag
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary"><h3>Welcome</h3><br> Please Enter your <strong>Password</strong> to view the question</br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false"></input>
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
There are two buttons inside the <form>. But when I inspect the webpage in the browser, I observed that those two buttons are not inside the <form>. What actually is causing the problem?
Following is the css:
#container-primary{
background-color: ;
}
#container-secondary{
background-color: ;
text-align: center;
}
#container-tertiary{
background-color: ;
text-align: center;
margin-top: 30px;
}
#pwd-form{
background-color: green;
}
#pwd{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
}
#pwd-error-container{
background-color: ;
font-size: 19px;
color: rgb(217, 48, 37);
font-weight: bold;
}
#button-container{
margin-top: 25px;
width: 40%;
min-width: 300px;
margin-bottom: 25px;
}
#question-form{
opacity: 0.3;
}
#answer{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 5%;
}
</style>```
I don't know where I have gone wrong. Screenshots of the inspection have been given in the comments section.
Remove your float-left and float-right classes from button.Then it work fine.
<div class="container" id="button-container">
<div class="row">
<div class="mr-auto">
<button type="submit" class="btn btn-info" id="forgotpwd">Forgot Password</button>
</div>
<div class="">
<button type="button" class="btn btn-info" id="submit-button" disabled>Validate</button>
</div>
</div>
</div>
https://jsfiddle.net/Lebxp70k/44/
your html code is invalid. You have closing tags where none are required and you are missing other closing tags that are required. Here's a corrected version
#container-primary{
background-color: ;
}
#container-secondary{
background-color: ;
text-align: center;
}
#container-tertiary{
background-color: ;
text-align: center;
margin-top: 30px;
}
#pwd-form{
background-color: green;
}
#pwd{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
}
#pwd-error-container{
background-color: ;
font-size: 19px;
color: rgb(217, 48, 37);
font-weight: bold;
}
#button-container{
margin-top: 25px;
width: 40%;
min-width: 300px;
margin-bottom: 25px;
}
#question-form{
opacity: 0.3;
}
#answer{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 5%;
}
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary">
<h3>Welcome</h3><br>
Please Enter your <strong>Password</strong> to view the question<br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false">
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
</div>
</div>
here's your html. You can clearly see in the snippet that the form tag is in red i.e. it's not closed. The problem is both your < /br > and your < /input > tags. < /br > should just be < br > and < input > tags do not get closed with < / input >
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary"><h3>Welcome</h3><br> Please Enter your <strong>Password</strong> to view the question</br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false"></input>
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
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 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>
I've had a block 'jumbotron' it has next css parameters:
.jumbotron {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
}
It's looks so good in the centre of window. But now I want put "container button-block"on that. With next css parameters it looks great too..
.button-block {
position: absolute;
top: 5%;
left: 36%;
}
But if I try to change windows size my 'button-block' is starting to dance and brakes design. How can I stick these buttons to jumbotron block What decision will more common?
.jumbotron {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
}
.button-block {
position: absolute;
top: 5%;
left: 36%;
}
<div class="page-header" style="background-image: url('../assets/img/background_presentation.jpg');">
<div class="container button-block">
<button type="button" class="btn btn-default btn-circle btn-xl active">1</button>
<button type="button" class="btn btn-default btn-circle btn-xl">2</button>
<button type="button" class="btn btn-default btn-circle btn-xl">3</button>
</div>
<div class="container">
<header class="jumbotron">
<h2 class="text-center text-white header">What is the property Address</h2>
<form>
<div class="form-group">
<label for="inputAddress" class="text-white">Address</label>
<input type="text" class="form-control" id="inputAddress">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="text-white">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-6">
<label for="inputZip" class="text-white">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-neutral btn-lg">Continue</button>
</div>
</form>
</header>
</div>
</div>
Something like this?
.container{text-align: center;}
.jumbotron {
position: relative;
top: 50%;
display: inline-block;
margin-top: 25%;
/*transform: translate(-50%,-50%);*/
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
}
.button-block {
position: absolute;
top: -22px;
left: 36%;
}
<div class="page-header" style="background-image: url('../assets/img/background_presentation.jpg');">
<div class="container">
<header class="jumbotron">
<div class="container button-block">
<button type="button" class="btn btn-default btn-circle btn-xl active">1</button>
<button type="button" class="btn btn-default btn-circle btn-xl">2</button>
<button type="button" class="btn btn-default btn-circle btn-xl">3</button>
</div>
<h2 class="text-center text-white header">What is the property Address</h2>
<form>
<div class="form-group">
<label for="inputAddress" class="text-white">Address</label>
<input type="text" class="form-control" id="inputAddress">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="text-white">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-6">
<label for="inputZip" class="text-white">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-neutral btn-lg">Continue</button>
</div>
</form>
</header>
</div>
</div>