My radio buttons are too close together and I would like them to evenly be displayed across the row using the bootstrap grid system. Any idea's on how I can accomplish this?
<div class="radio">
<div class="row">
<div class="col-md-12">
<label>
<input id="visitors_radio" name="user[role]" type="radio">
Visitors
</label>
<label>
<input id="staff_radio" name="user[role]" type="radio">
Staff
</label>
<label>
<input id="volunteer_radio" name="user[role]" type="radio">
Volunteer
</label>
</div>
</div>
</div>
<div class="radio">
<div class="row">
<div class="col-md-4">
<label>
<input id="visitors_radio" name="user[role]" type="radio">
Visitors
</label>
</div>
<div class="col-md-4">
<label>
<input id="staff_radio" name="user[role]" type="radio">
Staff
</label>
</div>
<div class="col-md-4">
<label>
<input id="volunteer_radio" name="user[role]" type="radio">
Volunteer
</label>
</div>
</div>
</div>
Make use of the bootstrap grid to help you to achieve that.
Related
I have a container containing a single row with two columns and am trying to format the left column so that it looks similar to a sidebar: full height and extending all the way to the left.
I used flex classes for this but ran into a couple problems:
the columns doesn't extend all the way down
the text "spreads" out instead of staying aligned in the center like before
Code without full height column:
<div class="container">
<form enctype=multipart/form-data action={{url_for('upload_file')}} method="POST" enctype="multipart/form-data"></form>
<div class="row">
<div class="col-sm-4 bg-light">
<br>
<br>
<h4>Select a model:</h4>
<input type="radio" id="logreg" name="model" value="logreg" required>
<label for="male">Logistic regression</label><br>
<input type="radio" id="knn" name="model" value="knn">
<label for="male">K-nearest neighbors</label><br>
<input type="radio" id="randomforest" name="model" value="randomforest">
<label for="male">Random forest</label><br>
<input type="radio" id="svm" name="model" value="svm">
<label for="male">Kernel SVM</label><br>
<br>
<h4>Visuals</h4>
<input type="checkbox" id="mel" name="mel" value="mel">
<label for="mel"> Show Mel-Spectrogram</label><br>
<input type="checkbox" id="chroma" name="chroma" value="chroma">
<label for="chroma"> Show Chroma Spectrogram</label><br>
<input type="checkbox" id="tempo" name="tempo" value="tempo">
<label for="tempo"> Show Tempogram</label><br>
<br>
<p>See the project on GitLab</p>
</div>
<div class="col-sm-8">
<br>
<br>
<h3>Music Genre Recognition</h3>
<p>We created an algorithm that can recognize the musical genre of an audio file.<br>
To try it, upload a file and choose a model, then click submit.</p>
<p>It can take up to a few minutes so be patient !</p>
<h3>Choose a file:</h3>
<br>
<input type="file" name="file" accept=".wav, .mp3" class="form-control" id="customFile" required/><br>
<button type="submit" class="btn btn-outline-secondary">Submit</button>
</div>
</div>
</form>
</div>
And this is the result:
This is the html where I tried to make the left column full height:
<div class="container-fluid d-flex h-100">
<form enctype=multipart/form-data action={{url_for('upload_file')}} method="POST" enctype="multipart/form-data"></form>
<div class="row flex-fill">
<div class="col-sm-4 bg-light d-flex flex-column flex-fill">
<br>
<br>
<h4>Select a model:</h4>
<input type="radio" id="logreg" name="model" value="logreg" required>
<label for="male">Logistic regression</label><br>
<input type="radio" id="knn" name="model" value="knn">
<label for="male">K-nearest neighbors</label><br>
<input type="radio" id="randomforest" name="model" value="randomforest">
<label for="male">Random forest</label><br>
<input type="radio" id="svm" name="model" value="svm">
<label for="male">Kernel SVM</label><br>
<br>
<br>
<h4>Visuals</h4>
<input type="checkbox" id="mel" name="mel" value="mel">
<label for="mel"> Show Mel-Spectrogram</label><br>
<input type="checkbox" id="chroma" name="chroma" value="chroma">
<label for="chroma"> Show Chroma Spectrogram</label><br>
<input type="checkbox" id="tempo" name="tempo" value="tempo">
<label for="tempo"> Show Tempogram</label><br>
<br>
<br>
<br>
<p>See the project on GitLab</p>
</div>
<div class="col-sm-8">
<br>
<br>
<h3>Music Genre Recognition</h3>
<p>We created an algorithm that can recognize the musical genre of an audio file.<br>
To try it, upload a file and choose a model, then click submit.</p>
<p>It can take up to a few minutes so be patient !</p>
<h3>Choose a file:</h3>
<br>
<input type="file" name="file" accept=".wav, .mp3" class="form-control" id="customFile" required/><br>
<button type="submit" class="btn btn-outline-secondary">Submit</button>
</div>
</div>
</form>
</div>
And this is the result:
How can I make this column full height and keep the text like in the first example ?
Bootstrap has some height utility classes that can stretch the height to be the same as the view port (.min-vh-100). If you apply this to the div with the .row class, flex should take care of stretching the columns to fill the space.
<div class="row min-vh-100">
...
</div>
Your toggles.demo.html in your documentation needs a section show the usage of the supported right-label class. Generally speaking, the .toggle-switch.right-label class isn't documented anywhere. We found out about it by digging into the code.
<section class="form-block">
<div class="form-group">
<label for="formGroupExampleInput">Right Label Toggles</label>
<div class="toggle-switch right-label">
<input type="checkbox" id="toggle_4">
<label for="toggle_4">Toggles turn on and off</label>
</div>
<div class="toggle-switch right-label">
<input type="checkbox" id="toggle_5" disabled>
<label for="toggle_5">Toggle off and disabled</label>
</div>
<div class="toggle-switch right-label">
<input type="checkbox" id="toggle_6" checked disabled>
<label for="toggle_6">Toggle on and disabled</label>
</div>
</div>
</section>
I am looking for a way to append a text field inline with a radio button, I am currently using Boostrap. If someone know a specific class for this purpose, that will be appreciated.
My current approach is always mis-aligned, the textbox goes right under the radio button which is something i dont want.
JSFiddle here. http://jsfiddle.net/fs85eedu/
<div class="radio">
<label class="control-label">
<input type="radio" name="radioname" id="radioid" class="radio_class">
<label>text here</label>
<div class='row'>
<div class="col-md-5">
<input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
</div>
</div>
</label>
</div>
Maybe something like this. Just put both controls in same row.
<div class="radio">
<div class='row'>
<div class="col-md-2">
<label class="control-label"></label>
<input type="radio" name="radioname" id="radioid" class="radio_class">
<label>text here</label>
</div>
<div class="col-md-3">
<input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
</div>
</div>
</div>
I have a bootstrap problem.
For normal screen (sm, md, lg), all is ok.
But for small screen (xs), I want the radio buttons part passes between the input and the button.
How to do that please ?
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-lg-3">
<h4>TITLE</h4>
</div>
<div class="form-group col-xs-12 col-sm-9 col-lg-7">
<input type="text" name="location">
</div>
<div class="form-group col-xs-12 col-sm-3 col-lg-2">
<button type="button">SEND</button>
</div>
</div>
<div class="col-lg-offset-3">
<div class="form-group">
<label class="radio radio-inline checked">
<input type="radio" name="radio" checked> RADIO 1
</label>
<label class="radio radio-inline">
<input type="radio" name="radio"> RADIO 2
</label>
<label class="radio radio-inline">
<input type="radio" name="radio"> RADIO 3
</label>
</div>
</div>
If you mean 2 line breaks, add them like so:
<br class="visible-xs"/>
<br class="visible-xs"/>
Otherwise, simply add the .visible-xs class to whatever you want visible at xtra small only.
What is the proper way to mark up help-inline or help-block for a radio or chechbox field?
This is not displaying as I would expect it to:
<div class="control-group">
<div class="controls">
<label class="radio" for="foo">
<input type="radio" name="foobar" value="foo" id="foo">
Foo label
</label>
<span class="help-inline">Foo inline help</span>
</div>
</div>
EDIT 1:
Follow up question: how do I mark up the second radio option? Wrapped in another div.controls?
See Simbirsk's answer - helped me:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
It would be nice to also write what do you actually expect. I'll have to guess on your expectations here and propose the following solution:
<div class="control-group">
<div class="controls">
<label class="radio" for="foo">
<input id="IsActivated" name="IsActivated" type="radio" value="true">
Is Activated
<span class="help-inline">Foo inline help</span>
</label>
</div>
</div>
We implemented it as follows:
<div class="control-group">
<label class="control-label" for="foo">Foo label</label>
<div class="controls">
<label class="checkbox">
<input id="foo" name="foo" type="radio">
Foo message
</label>
</div>
</div>