I am working on a bootstrap modal form window. The window appears on desired click but the no styles(classes) appear on them. I mean the whole design is disturbed with no colors and no alignments. Can anyone let me know what can be improved? I am posting my code here for modal window. I am not sure if I am leaving something vital,I have already spent some 2-3 hours on this and still clueless.
<style>
.modal-notify .modal-header {
border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
border-radius: 3px;
}
</style>
<div class="modal fade" id="orangeModalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header text-center">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate">
<label data-error="wrong" data-success="right" for="form3">Name</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Email</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="mobile" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Mobile</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fas fa-paper-plane-o ml-1"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>`
have you included bootstrap css in the page ?
You need to include bootstrap in you HTML page, inside your <head></head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.modal-notify .modal-header {
border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
border-radius: 3px;
}
.fade:not(.show) {
opacity: 1;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
</style>
</head>
<body>
<div class="modal fade" id="orangeModalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header text-center">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate">
<label data-error="wrong" data-success="right" for="form3">Name</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Email</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="mobile" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Mobile</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fas fa-paper-plane-o ml-1"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</body>
</html>
Related
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 to place the text input and the button next to each other, with about 10px margin between them.
Whit this code, i get the result what you can see on the uploaded photo.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="float-left">
<input type="number" class="form-control item_page_item_db w-50" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
</div>
<div class="float-left">
<button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Kosárba helyezem
</button>
</div>
<div class="clearfix"></div>
</div>
I want them closer to each other, and vertically centered the right way. Now, they dont have any css for size, only just colors and font size...
The bootstrap way: Use col classes to create a width (Shown below)
.row {
background: #f8f9fa;
margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-2">
<input type="number" class="form-control" value="1">
</div>
<div class="col-sm-10">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-shopping-basket"></i>
Kosárba helyezem
</button>
</div>
</div>
</div>
Pure CSS way:
.cont {
display: flex;
}
input {
width: 100px !important; /**use specific width**/
margin-right: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont">
<input type="number" class="form-control" value="1">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-shopping-basket"></i>
Kosárba helyezem
</button>
</div>
See the below structure and css. Hope it helps.
.col-sm-6 input[type="number"]{width:100%}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="number" class="form-control item_page_item_db" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
</div>
<div class="col-sm-6">
<button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Kosárba helyezem
</button>
</div>
<div class="clearfix"></div>
</div>
</div>
You can use col-md-6 class instead of float-left or right.
I am still new to web dev, and in the beginning stages of working on this project. My issue right now, is when resizing my display below 1200 pixels the content of my second form on the left side shifts. The content of the TEXT changes from 2 lines to 3 lines and makes the bottom section extend further that the right side. Trying to find a way to keep the content even across the bottom as the page resizes.
var toggle = function(){
var exists = document.querySelector("#existButton");
console.log(exists.innerHTML);
if(exists.classList.contains("btn-warning")){
exists.classList.remove("btn-warning");
exists.classList.add("btn-info");
exists.innerHTML = "copy";
//document.getElementById("#existButton").innerHTML = 'check'
} else {
exists.classList.remove("btn-info");
exists.classList.add("btn-warning");
exists.innerHTML="check";
//document.getElementById("#existButton").innerHTML = 'copy'
}
}
body{
background: repeating-linear-gradient(
to right,
#050210,
#050210 50px,
#271f41 50px,
#271f41 100px
)
}
.jumbotron {
margin-bottom: 0;
background-color: #cbd0d3;
}
.container .jumbotron{
border-radius: 0px;
}
.navbar{
margin-bottom: 0;
background-color: #44abe2;
margin-top: 30px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar .navbar-default {
border-radius: 0px;
}
.navbar-default .navbar-brand{
color: white;
}
.automatic {
background-color: #6e8a99;
padding-bottom: 40px;
border-bottom-left-radius: 6px;
}
.manual {
background-color: #83929a;
padding-bottom: 40px;
border-bottom-right-radius: 6px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Mailbox Creator</title>
</head>
<div class="container">
<nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
<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="#">Brand</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="dropdown">
Mailbox Management <span class="caret"></span>
<ul class="dropdown-menu">
<li>User Mailbox Management</li>
<li>Resource Mailbox Management</li>
<li>Mailbox Update Management</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hello $username</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1 class="text-center">Mailbox Creator Pro</h1>
</div>
<!-- ***************************************** -->
<!-- ********** Automatic Forms ************* -->
<!-- ***************************************** -->
<div class="container">
<div class="row">
<div class="col-md-6 automatic">
<form>
<!-- <div class="form-group text-center">
<label><u>Automatic</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Automatic</u></h4>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="accountName">Account Name</label>
<div class="col-md-6">
<input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success btn-sm ">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px">Does account have email?</label>
<div class="col-md-6 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
<!-- ***************************************** -->
<!-- ********** Manual Form ***************** -->
<!-- ***************************************** -->
<div class="col-md-6 manual">
<form>
<!-- <div class="form-group text-center">
<label><u>Manual</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Manual</u></h4>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1 " for="accountName">Email</label>
<div class="col-md-5">
<input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
</div>
<label class="col-md-2 col-form-label" for="accountName">Account</label>
<div class="col-md-2">
<input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-success btn-sm">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
<div class="col-md-5 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-4 mt-3">
<button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
</div>
<div class="col-md-1 mt-3">
<button type="submit" class="btn btn-warning btn-sm" >Copy</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
</div><!-- End Row -->
</div>
</div><!-- End Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
</body>
</html>
Account Name is too long, so if you add a padding-right:0; to that element, it will have enough room.
Check my snippet in its full-page mode.
var toggle = function(){
var exists = document.querySelector("#existButton");
console.log(exists.innerHTML);
if(exists.classList.contains("btn-warning")){
exists.classList.remove("btn-warning");
exists.classList.add("btn-info");
exists.innerHTML = "copy";
//document.getElementById("#existButton").innerHTML = 'check'
} else {
exists.classList.remove("btn-info");
exists.classList.add("btn-warning");
exists.innerHTML="check";
//document.getElementById("#existButton").innerHTML = 'copy'
}
}
body{
background: repeating-linear-gradient(
to right,
#050210,
#050210 50px,
#271f41 50px,
#271f41 100px
);
}
.jumbotron {
margin-bottom: 0;
background-color: #cbd0d3;
}
.container .jumbotron{
border-radius: 0px;
}
.navbar{
margin-bottom: 0;
background-color: #44abe2;
margin-top: 30px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar .navbar-default {
border-radius: 0px;
}
.navbar-default .navbar-brand{
color: white;
}
.automatic {
background-color: #6e8a99;
padding-bottom: 40px;
border-bottom-left-radius: 6px;
}
.manual {
background-color: #83929a;
padding-bottom: 40px;
border-bottom-right-radius: 6px;
}
#ml-2{
padding-right:0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Mailbox Creator</title>
</head>
<div class="container">
<nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
<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="#">Brand</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="dropdown">
Mailbox Management <span class="caret"></span>
<ul class="dropdown-menu">
<li>User Mailbox Management</li>
<li>Resource Mailbox Management</li>
<li>Mailbox Update Management</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hello $username</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1 class="text-center">Mailbox Creator Pro</h1>
</div>
<!-- ***************************************** -->
<!-- ********** Automatic Forms ************* -->
<!-- ***************************************** -->
<div class="container">
<div class="row">
<div class="col-md-6 automatic">
<form>
<!-- <div class="form-group text-center">
<label><u>Automatic</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Automatic</u></h4>
<div class="form-group row">
<label class="col-md-3 col-form-label" id="ml-2" for="accountName">Account Name</label>
<div class="col-md-6">
<input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success btn-sm ">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px">Does account have email?</label>
<div class="col-md-6 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
<!-- ***************************************** -->
<!-- ********** Manual Form ***************** -->
<!-- ***************************************** -->
<div class="col-md-6 manual">
<form>
<!-- <div class="form-group text-center">
<label><u>Manual</u></label>
</div> -->
<h4 class="text-center pb-2"><u>Manual</u></h4>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1 " for="accountName">Email</label>
<div class="col-md-5">
<input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
</div>
<label class="col-md-2 col-form-label" for="accountName">Account</label>
<div class="col-md-2">
<input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-success btn-sm">Create</button>
</div>
</div>
</form>
<form>
<div class="form-group row">
<label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
<div class="col-md-5 mt-3">
<input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
</div>
<div class="col-md-4 mt-3">
<button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
</div>
<div class="col-md-1 mt-3">
<button type="submit" class="btn btn-warning btn-sm" >Copy</button>
</div>
</div>
</form>
<textarea class="form-control form-control-sm mb-1" ></textarea>
</div>
</div><!-- End Row -->
</div>
</div><!-- End Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
</body>
</html>
I have a simple form that i want it to be responsive even to the smallest screen like an Iphone 5. When it's on the large screen, it has no problem but when it decrease it destroys the form. What is the technique on how to make forms responsive. What is the quickest way to do it?
html, body{
font-family: Helvetica;
font-size: 12px;
}
.center_div{
margin: 0 auto;
width: 40%;
padding: 10px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chinese</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
<div class="row">
<div class="panel panel-danger login">
<div class="panel-heading">
<h3 class="text-center title">China</h3>
</div>
<br>
<div class="container-fluid">
<div class="panel-body">
<div class = "form-group">
<label>Username</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" id="id" name="email" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>Password</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>No</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<br>
Login
<br>
</div>
</div>
</div>
</div>
</div>
</body>
You must use col-lg/md/sm/xs-N , col-lg/md/sm/xs-offset-N classes in div instead of width: 40%;
See https://getbootstrap.com/examples/grid/ .
Use have a grid with 12 cells horisontally. You can define cell width and offset for each of screens: extrasmall, small, medium, large.
https://jsfiddle.net/ej59s3jt/
<style>
html, body{
font-family: Helvetica;
font-size: 12px;
}
.center_div{
margin: 0 auto;
padding: 10px;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chinese</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0 ">
<div class="panel panel-danger login">
<div class="panel-heading">
<h3 class="text-center title">China</h3>
</div>
<br>
<div class="container-fluid">
<div class="panel-body">
<div class = "form-group">
<label>Username</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" id="id" name="email" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>Password</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<div class = "form-group">
<label>No</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
<input type="password" id="password" name="password" class = "form-control">
</div>
</div>
<br>
Login
<br>
</div>
</div>
</div>
</div>
</div>
</div>
Login Modal
Can someone give me ideas on how to do it? I tried to do it on bootstrap but the logo is inside the modal. i want to put my logo in the middle and half of it are on outside like in the first picture. Im new to html and css. Can someone give me clues on how to do it?
here is my work...
My Login Modal
This is the code you are asking for. Use this code it will perfectly work for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.logo-margin-negative{
margin-top: -100px;
}
.modal{
padding-top: 100px ! important;}
</style>
</head>
<body>
<div class="container">
<h2>Click button to enter login</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Login Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><img src="http://placehold.it/150x150" class="center-block img-circle logo-margin-negative"></h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Username</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Username">
</div>
</div>
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Password</label>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-key"></i></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-5 col-sm-offset-4">
<button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>