I have a couple of bootstrap toggle buttons, as shown in the example below.
For weird reasons, the button text is always vertically aligned to the top whereas the various examples taken from the bootstrap website show button texts vertically centered.
Looking at the doc available on the website (http://www.bootstraptoggle.com), I did not find out any additional setting to put in my code :
<div class="example">
<span class="label label-primary">chk01 - Chambre 1 [A]</span>
<input id="chk01" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk02 - Chambre 2 [B]</span>
<input id="chk02" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk03 - Chambre 3 [N]</span>
<input id="chk03" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk04 - Salle de bains (Lavabo) [C]</span>
<input id="chk04" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk05 - Salle de bains (Baignoire) [D]</span>
<input id="chk05" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk06 - Lumière WC [Z]</span>
<input id="chk06" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
Any idea about what I have missed? I hope my question is clear enough. Many thanks for your kind help.
Related
I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)
I try many as it seems only ways is a position to be fixed is there another way to do it?
Here the image
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
.flex{display: flex;}
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<div class="flex">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
</div>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
My block of code
<div class="form-row">
<div class="col">
<div class="search-contributor-box">
<p>
<input type="text" class="form-control search-contributor"
placeholder="Contributor" name="contributor" id="contributor"
value="Add contributor" autocomplete="off">
</p>
<div class="sub-search-contributor sub-panel" style="display: none;">
<p class="lead" style="text-align:center;color:#a9a9a9;">
<i class="fa fa-search"></i>
Looking for someone
</p>
</div>
</div>
</div>
<div class="col">
<p>
<select class="form-control form-control-sm" id="role" name="role">
<option value="developer" selected>Developer</option>
<option value="leader">Leader</option>
</select>
</p>
</div>
<div class="col">
<p>
<input type="text" class="form-control" placeholder="Salary" id="salary"
name="salary" value="">
</p>
</div>
</div>
It produce me like this:
how to style ,to get display result Looking for someone over other other div
If i dont misunderstanding, try to set
style={position: 'absolute'}
in the div u want to over
I need to do this card. I've done all, but my row with Date and time sucks. Please, help me to do it correctly. The first image shows how it must be, the second is mine. I don't know how to do: 1)a proper space between input date and input time. 2)How to make this card to be responsive so on the extrasmall screens it would take all 12 col. 3)why my radios are grey ? in the example they are white
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date and Time</label>
<div class="col-md-8">
<div class="input-group">
<div class="input-group-addon"> <span class="fa fa-calendar"></span></div>
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
<div class="col-md-1"></div>
<div class="input-group-addon"> <span class="fa fa-clock-o"></span></div>
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
I solved to you the 3 problems, check the code, the last style I put it inline but you can use the class of bootstrap and put what you want of props and add (!important) to take your style
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date and Time</label>
<div class="input-group">
<div class="col-xs-8">
<div class="input-group">
<div class="input-group-addon" style="background-color: white"> <span class="fa fa-calendar"></span>
</div>
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon" style="background-color: white"> <span class="fa fa-clock-o"></span></div>
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
I am trying to center my labels on top of me datetimepicker inputs but text-align:center does not seem to be cutting it.
http://jsfiddle.net/aesh3ufk/4/
Does anyone know how to center the labels on top of my inputs? Even !important does not work...
<div class="row">
<div class="col-xs-12">
<h4><strong>ITEMS CHECKED IN</strong></h4>
<div class='col-md-6'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<label for="To">To</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' id="To" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
That's an easy fix actually. Just add text-center to your col-md-6 <div>s:
<div class="row">
<div class="col-xs-12">
<h4 class="CAlign"><strong>ITEMS CHECKED IN</strong></h4>
<!-- Right Here -->
<div class='col-md-6 text-center'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- And Here -->
<div class='col-md-6 text-center'>
<label for="To">To</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' id="To" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
JSFiddle Example
The label's display style is inline-block and you must change it to block in order to be able to align the text to the center
One option is just to add the .text-center Bootstrap class to the parent div like so:
<div class='col-md-6 text-center'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
http://jsfiddle.net/aesh3ufk/6/
What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.