I want this result like Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each other
But he uses bootstrap 5, I use bootstrap 3.3.7 so it does not work.
<div class="d-flex">
<div class="form-check form-check-inline">
<input class='form-check-input' type='radio' />
<label class='form-check-label'>Y</label>
</div>
<div class="form-check form-check-inline">
<input class='form-check-input' type='radio' />
<label class='form-check-label text-nowrap'>N</label>
</div>
<div class="input-group input-group-sm">
<label>XXX</label><input type='text' />
</div>
</div>
Thank Gerard. But it's different from my thought.
You can add additional CSS to modify the alignment.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-1 col-xs-2">
<input type='radio' />
<label>Y</label>
</div>
<div class="col-md-1 col-xs-2">
<input type='radio' />
<label>N</label>
</div>
<div class="col-md-4">
<label>XXX</label><input type='text' />
</div>
</div>
Related
I'm using bootstrap to create inline radio buttons. But neither are being selected.
I've tried several things like changing the for attributes, name. Calling the bootstrap function differently. Also tried actually changing the ::before color from the bootstrap function.
<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">
<div class="form-inline">
<label for="rd_Gender" class="col-md-6 col-form-label text-left">
Gender:<span id="spnGender" style="color:red; display:none;"> *</span>
</label>
<div id="rd_Gender" onclick="clearRatings()" class="form-inline d-flex align-items-center">
<div class="custom-control custom-radio custom-control-inline">
<label class="custom-control-label female" for="rd_Gender_0">
<input id="rd_Gender_0" type="radio" class="custom-control-input" name="Gender" value="50" checked="checked" />
{{calcData.prCalcLabels.lblFemale}}
</label>
</div>
<div class="custom-control custom-radio ml-5 custom-control-inline">
<label class="custom-control-label male" for="rd_Gender_1">
<input id="rd_Gender_1" type="radio" class="custom-control-input" name="Gender" value="51" />
{{calcData.prCalcLabels.lblMale}}
</label>
</div>
</div>
</div>
I'm expecting one or the other radio button to be selected. It selects but background doesn't change.
<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">
<div class="form-inline">
<label for="rd_Gender" class="col-md-6 col-form-label text-left">
Gender:<span id="spnGender" style="color:red; display:none;"> *</span>
</label>
<div id="rd_Gender" onclick="clearRatings()" class="form-inline d-flex align-items-center">
<div class="custom-control custom-radio">
<input id="rd_Gender_0" type="radio" class="custom-control-input" name="Gender" value="50" checked="checked" />
<label class="custom-control-label female" for="rd_Gender_0">
{{calcData.prCalcLabels.lblFemale}}
</label>
</div>
<div class="custom-control custom-radio ml-5">
<input id="rd_Gender_1" type="radio" class="custom-control-input" name="Gender" value="51" />
<label class="custom-control-label male" for="rd_Gender_1">
{{calcData.prCalcLabels.lblMale}}
</label>
</div>
</div>
</div>
I have the following code in bootstrap. I need to align the label with the checkbox but even after looking at some solutions, I have not been successful:
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label>
Show entities?
<input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
</label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
Considering if you are using bootstrap 4, you can do this to get that result
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>
<!-- or using inline form -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Show entities?
</label>
</div>
Try this code snippet hope it will help :
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label class="d-flex align-items-center"> Show entities? <input type="checkbox" id="inactiveEnt" name="checkbox" class="ml-3"> </label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
If you're using Bootstrap, just use a form-group. Create the label and reference the input by using a "for" attribute that matches the ID of the input.
<div class="form-group row">
<label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
</div>
</div>
If I understood what you want I think this can be the solution you are looking for (append classes btn and btn-default to your input element to align vertically to your label text)
<div class="row">
<div class="col-xs-12">
<span>
<input type="checkbox" class="btn btn-default">
</span>
<label class="form-label">here is my label</label>
</div>
</div>
here is the fiddle: https://jsfiddle.net/p9wud84v/1/
I'm facing a problem I don't really know how to deal with.
I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)
I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them.
Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).
I would like the "Email" and "Telephone" to be scaped and to change their width
Please have a look at my code and the following image explaining it:
http://www.bootply.com/T8w3oRE3Sn
You were missing few things in the form group so I have wrapped things up. Hope it will help you :)
Below is the working snippet:
.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
Try this
IF you see it in large screen it will be inline.
You have to use form-inline class to make form inline.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to deal with good understanding of bootstrap grid system
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>
I'm stuck for a while on a scaling problem ...
When i resize the window(mobile) the "%" go below the input even with the 80% width, idk why he don't stay at right...
<html>
<head>
<!--<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<body>
<div class="col-md-6">
<div class="row form-inline text-center">
<div class="form-group col-md-3 form-inline text-center">
<label for="a">A</label></br>
<input id="a" name="a" type="number" class="form-control" style="width:80%;"/><b>%</b>
</div>
<div class="form-group col-md-3">
<label for="b">B</label></br>
<input id="b" name="b" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">C</label></br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">D</label> </br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
</div>
</div>
<body>
</html>
if anyone knows what's wrong ...
The '%' is taking up more then 20% of the width on small screens. A nice solution would be to use input addons available in bootstrap: http://getbootstrap.com/components/#input-groups-basic
so I was trying to create a form panel with Twitter Bootstrap into the center of the page, and hopefully even when the browser is resizing, it still be at the center,
here's what I tried on jsfiddle, the problem is I can't seem to make it center, anyone had ideas? the full code is in below
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">
Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe"
required="" />
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******"
required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">
Submit</button>
</form>
</div>
</div>
</div>
</div>
the preview:
Please replace
<div class="panel panel-default">
with this
<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
You can also use columns to size and center your panel, for example:
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
Try setting the margins in the div's style attribute:
style="margin-left:auto;margin-right:auto;"
Hope it works...