I'm working on a simple website with pure HTML, CSS, PHP and Bootstrap. I want to use the checkboxes from Bootstrap, but they seem to be acting weird in different browsers... For example in Chrome, they are really big and out of place.
And on Safari, they appear normal, but when clicked on, they do a jumping motion..
I want them to appear normal size and all on the same line.
This is the code:
<div class="row">
<div class="row">
<div class="col-md-12">
<label>Products :</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-unstyled list-inline checkbox-list">
<li><label class="checkbox-inline">Food </label>
<input type="checkbox" id="inlineCheckbox1" name="products[]" value="food">
</li>
<li><label class="checkbox-inline">Books</label><br>
<input type="checkbox" id="inlineCheckbox1" name="products[]" value="books">
</li>
<li><label class="checkbox-inline">Phones</label><br>
<input type="checkbox" id="inlineCheckbox1" name="products[]" value="phones">
</li>
</ul>
</div>
</div>
</div>
Any idea?
Related
Probably has been asked before but didn't manage to find an answer.
I would simply like to right align the bootstrap4 toggle buttons.
<ul >
<li>
<label for="test1">Small Length Label</label>
<input id="test1" class="float-right" style="float: right" checked data-toggle="toggle" type="checkbox" />
</li>
<li>
<label for="test2">Longer__ Length Label </label>
<input id="test2" style="float: right" checked data-toggle="toggle" type="checkbox" />
</li>
<li>
<label for="test3">Longer_Longer_Longer Label </label>
<input id="test3" style="float: right" checked data-toggle="toggle" type="checkbox" />
</li>
</ul>
Here is a JSFiddle showing the current alignment.
I would like the toggle buttons to be on the same column no matter the text length.
I think what you're looking for is <div class="d-flex justify-content-between">
Just wrap the elements inside the li like this:
<li>
<div class="d-flex justify-content-between">
<label for="test1">Small Length Label</label>
<input id="test1" class="float-right" style="float: right" checked data-toggle="toggle" type="checkbox" />
</div>
</li>
To have space between the text and input
I would use flexbox for this. Just add the following classes to the ul element: d-flex flex-column align-items-end. And, optionally, a width of your choice.
How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>
I'm using bootstrap now for my design, earlier I used table, tr and td and it worked fine. But now, the design gets changed and I want to see both elements in a single row.
Here is my code
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
jsfiddle is here
https://jsfiddle.net/Z4ntn/438/
On top of it I would like to build similar kind in another rows.
Plz let me know what went wrong and what needs to be updated to see both in a single row.
Bootstrap says form-inline for elements in same line
like this
<div class="row">
<div class="col-xs-6">
<div class="form-inline">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control"/>
</div>
</div>
</div>
EDIT
Bootply:
Form-inline
I'm trying to align a radio button, an input and some text inside one of my list-group-items, it looks good #desktop but #mobile it goes one on top of the other.
This is my code so far
<div class="panel panel-default">
<div class="panel-body">
<span style="color: #990000; font-size:17px;"><strong>8,55 €</strong></span> text
<ul class="list-group">
<li class="list-group-item"><input name="1" type="radio"> 1 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="2" type="radio"> 3 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="3" type="radio"> 6 text <strong>8,55 €</strong></li>
<li class="list-group-item">
<div class="container-fluid">
<div class="row">
<div class="col-md-1"><input name="n" type="radio" ></div><div class="col-md-3"><input type="text" name ="text" id="amount" class="form-control" placeholder="12"></div><div class="col-md-8" >text<strong>8,55 €</strong></div>
</div>
</div>
</li>
</ul>
</div>
</div>
Is there anything I can do to have it responsive and aligned in mobile as well as dekstop?
You can use col-xs-* in place of col-md-*: fiddle example
<div class="col-xs-1">
<input name="n" type="radio" >
</div>
<div class="col-xs-3">
<input type="text" name ="text" id="amount" class="form-control" placeholder="12">
</div>
<div class="col-xs-8" >
text<strong>8,55 €</strong>
</div>
Hello I am familiar with Bootstrap, but not very experienced with it. I am using it to create a static form, but I can't seem to get these panels to sit side by side with the "col-md-6" class tag inside of the rows.
I've been trying to read the Bootstrap documentation as well as look at other examples, but so far no luck. I've been spinning my wheels modifying classes, changing divs, adding divs, and just having no luck what so ever.
Below is the code I have extracted from my form which is the probelmatic area.
<div class="container">
<div class="form-group col-md-6">
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="strategy" class="control-label">Strategy</label>
<input type="text" class="form-control" id="strategy" placeholder="Strategy" />
</div>
<br/>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<label>Type of Service:</label>
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Transport
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Storage
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Balancing
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Park/Lend
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="internalBusinessUnit" class="control-label">Internal Business Unit</label>
<input type="text" class="form-control" id="internalBusinessUnit" placeholder="Internal Business Unit" />
</div>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Hub/Wheel
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Exchange
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Pooling
</li>
<li class="checkbox">
Other:
<input type="checkbox" value="" />
<div class="col-xs-2">
<input type="text" class="form-control" id="other" placeholder="" />
</div>
</li>
</ul>
</div>
</div>
</div>
Now I have had form tags in here and tried form-inline as well as form-horizontal, but I am basically trying to have each panel sit side by side with one another. I also seem to be having an issue with the "Other" label appearing after the input box.
Fiddle for good measure : Fiddle
*There is probably a better way for me to position the elements on the next line as opposed to the break lines that I used, but like I said, I am new to Bootstrap and will only learn by doing. I assumed using the "row" would stack them vertically.
I had a quick fiddle with it. I think you should be able to use this to work with.
JSFiddle here
Note: I used
form-group
and tidied up the col's to help layout the form elements.