Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
Register / Login
Post Reply
Bookmark Topic
Watch Topic
New Topic
programming forums
Java
Mobile
Certification
Databases
Caching
Books
Engineering
Micro Controllers
OS
Languages
Paradigms
IDEs
Build Tools
Frameworks
Application Servers
Open Source
This Site
Careers
Other
Pie Elite
all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Campbell Ritchie
Jeanne Boyarsky
Ron McLeod
Paul Clapham
Liutauras Vilda
Sheriffs:
paul wheaton
Rob Spoor
Devaka Cooray
Saloon Keepers:
Stephan van Hulst
Tim Holloway
Carey Brown
Frits Walraven
Tim Moores
Bartenders:
Mikalai Zaikin
Forum:
HTML Pages with CSS and JavaScript
Bootstrap 3 radio button are stacked horizontally instead of vertically
Glyndwr Bartlett
Ranch Hand
Posts: 164
posted 3 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
I want my Bootstrap 3 radio buttons to appear inline, not horizontally stacked. I followed:
https://mdbootstrap.com/docs/standard/forms/radio/
To get:
<form data-toggle="validator" role="form" id="showProgramTableForm"> <div class="container-fluid"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left"> <button type="button" id="addProgramBtn" class="btn btn-large btn-primary" >Add Program</button> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="rbProgramAll" name="rbProgramAll"> <label class="form-check-label" for="rbProgramAll">All programs</label> </div> <!-- Material inline 2 --> <div class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="rbProgramGroup" name="rbProgramGroup"> <label class="form-check-label" for="rbProgramGroup">My Group's programs</label> </div> <!-- Material inline 3 --> <div class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="rbProgramMine" name="rbProgramMine"> <label class="form-check-label" for="rbProgramMine">My programs</label> </div> </div> </div><!-- /container --> </form>
The above are stacked horizontally.
Bear Bibeault
Sheriff
Posts: 67746
173
I like...
posted 3 years ago
1
Number of slices to send:
Optional 'thank-you' note:
Send
That site describes a port of Material Design for Bootstrap 4 and 5.
If you are targeting Bootstrap 3, you are looking in the wrong place.
Try here.
[
Asking smart questions
] [
About Bear
] [
Books by Bear
]
Glyndwr Bartlett
Ranch Hand
Posts: 164
posted 3 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Thanks Bear,
The answer is:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <input type="radio" id="rbProgramAll" name="rbProgram"> <label class="radio-inline" for="rbProgramAll">All programs</label> <input type="radio" id="rbProgramGroup" name="rbProgram"> <label class="radio-inline" for="rbProgramGroup">My Group's programs</label> <input type="radio" id="rbProgramMine" name="rbProgram"> <label class="radio-inline" for="rbProgramMine">My programs</label> </div>
Kind reagrds,
Glyn
my overalls have superpowers - they repel people who think fashion is important. Tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Storing an MS Excel xlsx file in a database; when retrieved it will not display
Dynamically create Bootstrap button does not trigger the Form submit on iPad
Unable to get Bootstrap grid to work with Kendo UI
What is the optimum order to include JS and CSS?
Grid system in bootstrap
More...