I'm trying in a thousand ways but I can't get the style or the spaces on that one. I need to use bootstrap.
I need it to look something like this
but mine is
My code is:
<!-- Cuarta fila -->
<div class="col-6">
<label for="creditc" class="form-label fw-bold">We accept:</label>
<div>
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
<i class="fa-brands fa-cc-visa"></i>
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
<i class="fa-brands fa-cc-mastercard"></i>
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
<i class="fa-brands fa-cc-apple-pay"></i>
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
<i class="fa-brands fa-cc-amazon-pay"></i>
</div>
</div>
<div class="col-6">
<label for="city" class="form-label fw-bold">Message</label>
<textarea class="form-control" style="overflow:auto;resize:none"></textarea>
<small id="passwordHelpBlock" class="form-text text-muted">Add any notes here.</small>
</div>
I know I don't have any styling code applied now or anything but I've tried gutters, spacing, colours (bs-secondary) and nothing works.
I created a complete code as an example, actually there are many ways to make it; I chose the shortest and fastest one for me
.contain-brand{
width: fit-content;
background-color: #6d757c;
}
.fa-brands{color:#FFF;}
/*edit standard css bootstrap*/
.form-check-input{margin-top: 0!important;}
<!--CSS for style-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--Code-->
<div class="container">
<div class="row">
<div class="col-6">
<label for="creditc" class="form-label fw-bold">We accept:</label>
<div class="contain-brand p-3 ms-0 rounded-1 row">
<div class="col p-0 me-3 align-self-center">
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-visa ms-1"></i>
</div>
<div class="col p-0 me-3 align-self-center">
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-mastercard ms-1"></i>
</div>
<div class="col p-0 me-3 align-self-center">
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-apple-pay ms-1"></i>
</div>
<div class="col p-0 me-2 align-self-center">
<input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-amazon-pay ms-1"></i>
</div>
</div>
</div>
<div class="col-6">
<label for="city" class="form-label fw-bold">Message</label>
<textarea class="form-control" style="overflow:auto;resize:none"></textarea>
<small id="passwordHelpBlock" class="form-text text-muted">Add any notes here.</small>
</div>
</div>
</div>
Related
I'm trying to use this bootstrap signup template here, but when I render it the icons for the user, email, password, etc. are missing.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" />
<label class="form-check-label" for="form2Example3">
I agree all statements in Terms of service
</label>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
class="img-fluid" alt="Sample image" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
When I render it via the code snippet plugin on stack overflow it just removes the icons entirely, but if you look at the example at the link you can see the icons, but what I get on my project is broken image indicators in place of the icons. It's not clear to me from the HTML though where the icons are loaded (unlike e.g. the image where it's super clear). How do I get it to correctly render the icons?
The icons you are trying to use i think are part of MDBootstrap that is a UI kit built on Bootstrap, so if you want the icons to render properly you got to include MDBootstrap in your project.
If you don't want to use that you can always use official Bootstrap 5 icons (https://icons.getbootstrap.com/, https://getbootstrap.com/docs/5.1/extend/icons/) or the recommended by Bootstrap developers Fontawesome icons (https://fontawesome.com/)
I'm learning html/css, I'm doing a registration form and I'd like to put the eye toggle to show the password inside the password input field, there is a way to do it to keep the scalability in the different resolutions? Searching online I think that I have to put them in a container and then use css but if I try to do it changing the container in css the whole my form breaks...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
EDIT:
the current password code you see are just some tests that I'm doing, If I don't put the passw input field and the inside a div, then they will be put one over the other, so I created a div to put them side by side... by also like this, if the resolution change then the eye icon will not be in the right place
This is how I implement pw visibility. As far as scalability, if you use Bootstrap's sizing classes it should all scale well. I've had no issues moving this between assorted screen sizes.
Addendum : centering the Eye
I modified the second password field.
To properly vertically center it I had to alter the html. Compare against the first password HTML.
In particular:
wrapped the "eye" containing div and the input in it's own relative div. (position-relative moved from outer div.control
Added Bootstrap class h-100 to the "eye" div
Added bootstrap class align-middle to the "eye" and
Created an actual rule for .pw-toggle that sets height: 1rem; so that align-middle centers correctly.
$(function() {
$("span.pw-toggle, span.pw-toggle2").click(function() {
var $pwField = $($(this).data().target);
var TorP = $pwField.attr('type') == 'password' ? 'text' : 'password';
$(this).text(TorP === "password" ? "visibility" : "visibility_off")
$pwField.attr('type', TorP);
});
});
span[data-target] {
cursor: pointer;
}
.pw-toggle {
height: 1rem;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4 position-relative">
<label class="form-label" for="passwordNewUser">Password</label>
<div class="position-absolute end-0 me-1">
<span data-target="#passwordNewUser" class="pw-toggle material-icons pr-1">visibility</span>
</div>
<input type="password" name="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="position-relative">
<div class="position-absolute end-0 me-1 h-100">
<span data-target="#rPasswordNewUser" class="pw-toggle material-icons pr-1 align-middle">visibility</span>
</div>
<input type="password" name="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<!-- Just for fun, the eye as a Bootstrap input
addon is much cleaner -->
<div clas="control mb-4">
<div class="input-group">
<input type="password" name="r2PasswordNewUser" id="r2PasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<span class="input-group-text">
<span data-target="#r2PasswordNewUser" class="pw-toggle2 material-icons">visibility</span>
</span>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input class="form-check-input me-2" type="checkbox" value="" name="checkboxterms" id="checkboxterms" />
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id="registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
This is how you would implement that functionality with JavaScript. We grab the eye ball icon and the two password fields. Then, loop through the eyeBall and add an event listener to it. It checks whether the type attribute is password or text. If it is password, it changes it to text.
let eyeBall = document.getElementsByClassName('viewPass');
let passInput = document.getElementsByClassName('passwordInput');
let passField = document.getElementById('passwordNewUser');
function change_visibility($type) {
for(let field of passInput) {
field.setAttribute('type', $type);
}
}
for(let eye of eyeBall) {
eye.addEventListener('click', function() {
if (passField.getAttribute('type') == 'password') {
change_visibility('text');
} else {
change_visibility('password');
}
});
}
.viewPass {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input class="passwordInput" type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input class="passwordInput" type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am creating a form that is wrapped inside a card in bootstrap. It worked fine on my pc. However, my page is unresponsive when it comes to small screens because of it. What is wrong?
The code is too long to paste here but here is the code where the card is:
<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="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group row">
<label class="col-form-label col-xs-12 col-sm-2" for="tables">Number of Guests</label>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables1" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables2" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables3" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables4" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables5" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables6" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
<div class="form-group row">
<label for="time" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
'''
P.S. I have no CSS related to it yet.
Your problem is position row and col-*. Then I changed radio button name for same name=tables because if a different name can't changed a pill.
Here an example:
<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="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-lg-3">
<label class="col-form-label" for="tables">Number of Guests</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="time" class="col-form-label">Date and Time</label>
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I'm trying to make the last row look exactly like the others, but with the icon appended to the text box. I can't seem to get the width right!
(I apologize... I don't know how to make the code snippet render properly in this page. You have to view full screen.)
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label>Date To:</label>
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
Retain the form group of the div above "Date to:" label, then you can insert a div wrapping the input and image div's and add the input-group class which will produce the required result, please check my below example!
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date To:</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want to keep it to the left, it takes a bit of out of class work like so:
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label class="pt-2">Date To:</label>
<input type="text" class="form-control ml-2"
style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
Now I tried classes .pull-right and .float-right to place my radio buttons at the right end. Its not working. Coding and Picture below.
<div class="row ">
<div class="form-group col-lg-6">
<div class="row">
<label class="Bold">Is Valid</label>
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</div>
</div>
<div class="form-group col-lg-6">
<div class="row">
<label class="Bold">Is Checked</label>
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</div>
</div>
</div>
Screenshot
I want like the below image(just a sample)
You will need to wrap your radio buttons to a div .form-group and use [bootstrap4 flex utilities] classes d-flex justify-content-between to align them
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row ">
<div class="form-group col-lg-6">
<div class="d-flex justify-content-between">
<label class="Bold">Is Valid</label>
<div class="form-group">
<input class="radio-inline" type="radio">Yes
<input class="radio-inline" type="radio">No
</div>
</div>
</div>
<div class="form-group col-lg-6">
<div class="d-flex justify-content-between">
<label class="Bold">Is Checked</label>
<div class="form-group">
<input class="radio-inline" type="radio">Yes
<input class="radio-inline" type="radio">No
</div>
</div>
</div>
</div>
</div>
You need to include bootstrap.min.css and wrap the radio buttons in <span> and give it float:right
.radio-group{
float:right;
}
.formrow {
margin-right: 0px !important;
margin-left: 0px !important;
}
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row formrow">
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Valid</label>
<span class="radio-group">
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</span>
</div>
</div>
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Checked</label>
<span class="radio-group">
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</span>
</div>
</div>
</div>