The radio-inline class should be limited to applying on columns with the classes col-lg-*, col-md-*, and col-sm-*, and should not be

I am currently facing a requirement where I need the radio buttons to display vertically on smaller screens (col-xs-*) and horizontally on larger screens (col-lg-, col-md- and col-sm-*). Right now, I am using the radio-inline class to make the radio buttons appear horizontally by default.

Fiddler: https://jsfiddle.net/Vimalan/hh9qtbfj/

Code:

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">View</label>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
             <label class="radio-inline">
                 <input type="radio" name="inlineRadioOptions" value="Record / Category" />
                 Record / Category
             </label>
             <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" value="Batch" />
                  Batch
             </label>
        </div>
    </div>
</div>

Question:

I'm wondering how to apply the 'radio-inline' css class only during col-lg-, col-md-, col-sm-* based on media query widths, but not during col-xs-*?

htmlcsstwitter-bootstrap-3

Answer №1

To override the styles of .radio-inline, you will need to apply different styles and put them in a media query targeting Bootstrap's xs size, like this:

View Demo Here

@media only screen and (max-width: 480px) {
  .radio-inline {
    display: block;
  }

  .radio-inline + .radio-inline {
    margin-left: 0;
  }
}

Please Note: Make sure these styles are loaded after the bootstrap stylesheet for them to take effect!

Answer №2

solution A:

@media (max-width: 768px) /* >= 768px (small tablet) */
{

 .radio-inline
{
// adjusting the default value
}
}

solution B:

<label class="bar-class">
   <input type="radio" name="inlineRadioOptions" value="Selection / Type" />
       Selection / Type
</label>

@media (max-width: 768px) /* >= 768px (small tablet) */
{

 .bar-class
 {
     position: relative;
     display: inline-block;
     padding-left: 20px;
     margin-bottom: 0;
     font-weight: 400;
     vertical-align: middle;
     cursor: pointer;
 }
}

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

Choosing jQuery over JQuery Mobile for a standard web application to effectively manage different devices

Creating a Unique Web Application In the works is a unique web application, similar to Trello, that divides a page into columns where tasks/cards can be added and moved between them. This desktop-focused platform will feature an information column on the ...

jqueryhtmlmobiletablettouchscreen

Is the div not occupying the full width and height due to the presence of invisible scrollbars?

My attempts to make the selected child, its parent, and html/body all have a height/width of 100% with padding right/bottom 0 seem unsuccessful. These mysterious bottom and right bars pop up once a month and it's so irritating. They are identical in ...

htmlcssfrontend

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

javascriptcssreactjshtml-table

Ways to create collapsible navigation bars in your website

As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...

javascripthtmlcsstwitter-bootstrapnavigation

What is the best way to vertically center content in Bootstrap 4.5?

Below is a snippet of the code I've been working on. <body style="height: 100vh; margin: 0; padding: 0; "> <!-- Form Section ============================================= --> <p>[wpshortcode1]</p> <div cl ...

htmlcssbootstrap-4

How do I create a left-to-right navigation bar for my web form?

Just starting out with Asp.net and now trying to create a right-to-left navbar. I've tried some code but everything ends up being left to right. ...

c#htmlasp.net

Embedding PHP code within the value attribute of an HTML element is

Hey there! I'm looking to perform a database search and then display the results in a pre-populated HTML form for the user. I've pinpointed the issue in my code where PHP is not being recognized by the server. I'm currently using UwAMP. To ...

phphtmlmysqlmysqliserver-side-validation

Is Swiper carousel navigation secretly operating without being seen?

I've got a website that utilizes the Swiper carousel from SwiperJS, find it here: An issue I am facing is that the navigation elements are invisible but functional, with the pagination feature unaffected. This peculiar behavior is observed only in Sa ...

javascripthtmlcssswiper.js

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

How to Build Two Navbars in BootstrapVue with a Sticky Bottom Navbar at the Top

My current project involves creating two navigation bars. The first navbar at the top consists of just a brand logo, while the second navbar at the bottom serves as the main navigation menu. I want the top navbar to scroll off the screen when users scroll ...

htmlcssvue.jsbootstrap-4bootstrap-vue

Hover shows no response

I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected. I've considered replacing the i tag with an a, and have also tried using both display: none and display: bloc ...

javascripthtmlcssangulartypescript

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

csshtml

A creative way to display a div upon hovering over a link dynamically

My website has dynamically generated a tags, each with its own corresponding div containing unique content and height. I want to make it so that when a user hovers over an a tag, the matching div is displayed. The div should appear at the position of the m ...

javascriptjqueryhtmlcss

Implementing audio effects in IE6 HTML

I've implemented the following code to play a sound effect on my website in Firefox, Chrome, and IE9: <body> <audio id="audio1"> <source src="audio.wav" type="audio/wav"> <source src="audio.mp3" type="audio/mpeg"> audio tag no ...

html

I am working in Angular 13 and attempting to dynamically assign attributes to an SVG HTML element by passing in values from variables declared in a TypeScript file

Within a specific HTML file of my Angular13 app, I'm aiming to dynamically bind a list of attributes and their values to an element using Angular's double-binding approach {{attribute value}}. This will allow me to display a series of social medi ...

htmlangularsvgpropertiesattributes

"Troubleshooting Issue: JavaScript and jQuery onClick Event Not Functioning Properly

Whenever I try to click on the "php1" div, nothing happens. The location.reload() function is only a placeholder used for testing if the onClick event is functioning properly. <div class="php-task"> <h1>PHP</h1> ...

javascripthtmljqueryajax

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

Output the name of the file while executing the ant process

Currently, I am utilizing YUI compressor within an ant build process to compress CSS and JavaScript files. I would like the compressor to display the name of each file it is processing as it goes along, so that in case of an error, I can easily pinpoint wh ...

javascriptcssantyui

Exploring ways to cycle through an array of objects during a jQuery ajax request

When making a jQuery ajax call to iterate over an API response, I am encountering the issue of receiving undefined data for all elements. Can someone guide me on how to properly iterate through an array of objects in jQuery? I am new to handling iteration ...

javascripthtmljqueryajaxbootstrap-4

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired