Designing Radio Buttons and Check Boxes for Forms

I need help with styling my HTML form. I want the first question label and corresponding radio buttons to appear on one line, and the second question label and corresponding check boxes to also be on one line. Below is my code snippet. Can you advise me on what changes I need to make and how to style it using CSS?

.jumbotron{
  position:relative;
  background : #000  url(background.jpg) center center;
  background-size: cover;
  overflow:hidden;
  margin-bottom:0px;
} 
.box{
  position:relative;
  background-color:#5DBCD2;
  width:90%;
  margin-top:0.5%;
  height:98.5%;
  margin-bottom:1%;
  margin-left:5%;
  margin-right:5%;
}
.navbar{
  min-height: 60px;
  margin-bottom:0px;
}
.navbar-inverse{
  background-color:#00FF00;
  border-color:#00FF00;
  font-size:150%;
  font-weight:bold;
}
.navbar-inverse .navbar-nav>li>a {
  color:#000000;
}
.navbar-inverse .navbar-brand {
  color: #ff0000;
  font-weight: bold;
  font-size:150%;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
  background-color:#800080;
}
#index .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.index, #experience .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.experience, #video .navbar-inverse>.container-fluid>...

  </form>
    </div>
  </div>
</div>

htmlcssformstwitter-bootstrap-3

Answer №1

Hey vivek,

I've made some adjustments to your code structure without altering the CSS. This pertains specifically to the column layout.

I trust this information proves beneficial for you. You can apply a similar approach with checkboxes as well!

<div class="form-group">
  <label class="control-label col-sm-2" for="rate">Kindly rate the website:</label> 
    <div class="col-sm-10"> 
        <div class="radio col-md-2">
          <label><input type="radio" name="optradio1">Excellent</label>
        </div>
        <div class="radio col-md-2">
          <label><input type="radio" name="optradio2">Very Good</label>
        <</div>
        <div class="radio col-md-2">
          <label><input type="radio" name="optradio3" >Good</label>
        <</div>      
        <div class="radio col-md-2">
          <label><input type="radio" name="optradio4">Fair</label>
        <</div>
        <div class="radio col-md-2">
          <label><input type="radio" name="optradio5">Poor</label>
        <</div>     
    <</div>
  <</div>

Answer №2

I tried to address your query by creating a FIDDLE for you.

Below is the CSS code I implemented:

/* styles to align checkboxes and radio buttons */
.radio-container, .radio,
.checkbox-container, .checkbox { 
    display: inline-block;
    float: left;
}
.checkbox:last-child, .radio:last-child{
    clear: right;
    display: block;
}

.control-label {
    display: block;
    float: none;
}

.label {
    display: block;
    clear: left;
    float: left!important;
}

In your HTML structure, I applied the classes mentioned above to the following section:

<div class="form-group">
  <label class="label control-label col-sm-2" for="rate">Please rate the site:</label> 
    <div class="radio-container col-sm-offset-2 col-sm-10"> 
        <div class="radio">
          <label><input type="radio" name="optradio1">Excellent</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio2">Very Good</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio3" >Good</label>
        </div>      
        <div class="radio">
          <label><input type="radio" name="optradio4">Fair</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio5">Poor</label>
        </div>     
    </div>
  </div>
  </div>
  <div class="form-group">
  <label class="label control-label col-sm-2" for="part">Best Part of Site :</label>
    <div class="checkbox-container col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label><input type="checkbox" value="home">Home</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="experience">Experience</label>
    </div>
    <div class="checkbox ">
      <label><input type="checkbox" value="video">Videos</label>
    </div>
    <div class="checkbox ">
      <label><input type="checkbox" value="hkust">HKUST Life</label>
    </div>
    </div>
   </div>
   <div class="form-group">
  <label class="label control-label col-sm-2" for="part">Best Aspect of Site :</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A simple way to clear an input type=number field with JavaScript when clicked by the user

Currently, I am experimenting with the implementation of a numeric input field using the <input type="number" ...> and the list option to display a predefined set of 'favorite' values while still allowing users to input other valu ...

javascripthtmlinputhtml-datalist

Issue with Font Requests in Browsers when Using Angular 10 and SCSS with @font-face

I have a project built with Angular 10 that utilizes SCSS for styling. In my _typography.scss file, I have defined some @font-face rules pointing to the font files located in the assets/fonts directory. However, when I run the application, the browser does ...

cssangularsassfonts

margin-top: automatic adjustment, with a minimum of 50 pixels

I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this. * { ...

javascripthtmlcss

Having trouble with document.getElementById.innerHTML not displaying the correct content?

document.getElementById works in getting the element, but for some reason, the content disappears as soon as it is written in it. There are no errors on the console to indicate what's causing this behavior. I have been unable to identify the reason b ...

javascripthtml

Tips for automatically floating elements to the right or left

I am currently working on a page that displays orders dynamically generated by Flask when a customer places an order. https://i.sstatic.net/W8f1s.png When clicking to expand an order, everything works smoothly if the order is on the left side. However, s ...

jqueryhtmlcss

Creating a clickable list of grouped items in Django is a versatile way to enhance user

I have grouped a list of items based on two fields class Product(models.Model): type_of_product = models.CharField(max_length=30,default="electric) made_in = models.CharField(max_length=10,choices=countries,default="UK") product= ...

pythonhtmldjango

Tips for using JQuery to remove a targeted sessionStorage item

I am curious about how to delete a specific sessionStorage value using JQuery. I have managed to delete input fields, but deleting the sessionStorage values has proven to be a challenge. Below is my code snippet. Here is the link to my jsfiddle: https://j ...

jqueryhtmlsession-storagesessionstorage

How to prevent redundancy in CSS styling

Exploring CSS on my own and have the following HTML structure: <style type="text/css"> #content { display: block; width: 250px; height: 50px; background-color: #330000; } /* pink */ #one, #two, #three, #four { height: 25px; width: 25px; float: left ...

css

Retrieve a random element from a selection of objects within an Array using JavaScript

Hey fellow Developers, I'm having trouble getting a random piece of data from some objects in an Array. When I try to display it, all I see is [object Object] instead of the actual text from the object. I've tried various methods but nothing seem ...

javascripthtmlcssarraysobject

Even when template paths are specified, tailwindcss still remains unpurged

When running npm run build in production mode, I am encountering an issue where my Tailwind styles are not being purged. Despite filling the purge array in tailwind.config.js with template paths for webpack + postcss setup, I keep seeing the following warn ...

csswebpacktailwind-css

When the condition is fulfilled within an HTML document

I'm a novice in the world of django. Currently, I am working on creating a poll application using django. My aim is to show the message, 'you entered correct'. if selected_choice='Yellow' Below is the code snippet I am using: de ...

pythonhtmlcssif-statement

What strategies can be implemented to stop the downloadthis button in a Quarto HTML report from suddenly moving to the top of the page when

My Quarto HTML report contains numerous download buttons, but each time I click on one, the browser automatically scrolls to the top of the screen. This issue occurs in both Chrome and Firefox. Is there a way to stop or prevent this behavior? For a comple ...

htmlrquarto

What is the best way to revert CSS modifications when leaving a component?

I have taught myself most of what I know and I realize there may be better practices out there that could help me. Right now, I am using jQuery to adjust an element's opacity when the mouse hovers over it. However, I am struggling with making sure tha ...

jquerycssangularangular7

How can I generate curved components (or the like) around a central point within a React Native application?

Recently, I came across an app screen in a series that caught my eye and I decided to recreate it using React Native. However, I've hit a roadblock when it comes to designing curved Views (arcs) with curved text inside them. These arcs need to animate ...

csstypescriptreact-nativesvgexpo

Form validation errors were detected

Currently, I am working with a formgroup that contains input fields with validations set up in the following manner: <mat-form-field class="mat-width-98" appearance="outline"> <mat-label>Profession Oc ...

javascriptangulartypescriptforms

Step-by-Step Guide: Uploading Multiple Images with Links to a MySQL Database

My current code is functioning perfectly for single image uploads. However, I now have the requirement to upload multiple images simultaneously with the same Image Title and Image Description for each group of images. These images will be used in a photo s ...

phphtmlmysqlimage

Steps for eliminating the overlay on top of the padding region

My current code includes an overlay over images, but the overlay extends beyond the image itself and covers the padding area as well. If I switch the padding to margin in order to eliminate this unnecessary overlap, it causes the last image to be pushed on ...

htmlcsstwitter-bootstrapbootstrap-4

Unique validation for mandatory selection on changeSelected

In my Angular HTML code, I have set up a dropdown and two text-boxes. My goal is to create a feature where, if the user selects an option from the 'payable_frequency' dropdown, then either one of the 'payable_commission' fields (min or ...

javascripthtmlangulartypescriptvalidation

What would be the most appropriate way to organize the following data structure?

I'm facing a challenge with organizing content on a non-CMS website for the first time. I have about 250 individuals, each with a first name, last name, telephone number, email address, and some additional information. My initial thought was to use a ...

jqueryhtmlarrayssortingstructure

What methods can be used to dynamically pan the entire picture in a programmatic way?

I have a massive div measuring 11500x11500 pixels that contains 400 images, causing it to overflow the viewport. My goal is to programmatically pan across the entire div. I'm aiming to create an animation that pans the entire div from top to bottom, ...

javascripthtmlcsscss-transitionspanning