Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below:

<div class="container-fluid">

<div class="form-group">
                  <label class="control-label col-sm-5 elm0" for="email">Date:</label>
                  <div class="col-sm-2 elm1">
                    <select class="form-control">
                        <option>1</option>
                        ....
                        <option>12</option>
                    </select>
                    </div>
                    <div class="col-sm-1 elm2">/</div>
                    <div class="col-sm-4 elm3">
                    <select class="form-control">
                        <option>2015</option>
                        ....
                        <option>2035</option>
                    </select>
                    </div>
                </div>
</div>

On smaller screens, the elements stack vertically instead of displaying inline. Changing from col-sm-.. to col-xs-.. doesn't fix the issue with elm0. Any suggestions?

csstwitter-bootstrapresponsive-design

Answer №1

If you want to simplify your code, consider removing the Bootstrap classes and implementing the following CSS rule:

.elm0,.elm1,.elm2,.elm3{
    display:inline-block;
}

SNIPPET

.elm0,
.elm1,
.elm2,
.elm3 {
  display: inline-block;
}
<style>
  .elm0,.elml,.elm2,.elm3{
    display:inline-block;
  }
</style>
<div class="container">

  <div class="element-group">
    <p class="label elm0">Example:</p>
    <div class="elm1">
      <span class="content">Content here</span>
    </div>
    <div class="elm2">/</div>
    <div class="elm3">
      <span class="content">More content</span>
    </div>
  </div>
</div>

Answer №2

It is recommended to utilize Bootstrap classes and properties for better styling. An example can be found here: http://getbootstrap.com/css/#forms. By applying these classes to the form, you can achieve a more visually appealing design. Check out this screenshot for reference: http://prntscr.com/6okd0g

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

Is there a way to customize the animation for a button in material UI?

Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...

javascriptcssreactjsmaterial-ui

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

I am experimenting with a Bootstrap example featuring a table in the left column and 4 columns in 2 rows in the right column. Check out the code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ...

javascripthtmlcssbootstrap-4

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

javascriptjqueryhtmlcss

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

javascriptjquerycssdrop-down-menu

What can I do to adjust the Navigation Item and Dropdown placement?

I've been working with Bootstrap dropdowns, but they're not aligning correctly for some reason. I've tried multiple solutions like updating my Bootstrap versions, but none of them seem to be working. Here is the code: <script src=" ...

htmlcssnavigationbootstrap-5

The scrollbar track has a habit of popping up unexpectedly

Is there a way to prevent the white area from showing up in my divs where the scroll bar thumb appears? The issue seems to occur randomly on Chrome and Safari. https://i.sstatic.net/jFzTf.png This is the div in question .column-content{ height:60vh; ...

htmlcssangularscrollscrollbar

How to Properly Wrap Sub-Menu Elements in WordPress with Div Tags

I am currently working on styling my WordPress sub menu list items using HTML. I have written the HTML code that I want to use, but I am not sure how to incorporate it into the wp_nav_menu() function. Can you assist me with this? <ul class="menu"> ...

htmlcsswordpress

Having trouble with the responsive design not functioning properly?

Having trouble with mobile view in my simple HTML Bootstrap code. Everything looks fine in desktop view but not in mobile. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ...

htmltwitter-bootstrapresponsive-design

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss

Hide bootstrap card on smaller screens such as sm and md

Utilizing the Bootstrap 4.1 card component, I showcase categories within the right sidebar - check out a sample image of the card here: Card example image; When viewing on smaller screens, it's preferable to collapse this large card as shown in this ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Using percentages for sizing and margins in CSS

Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...

javascriptjquerycss

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar Here is my current navbar for reference: My current navbar <header> <n ...

htmlcssnavbarbootstrap-5

how to adjust the width of table columns dynamically using ng-repeat and AngularJS

Working on a user interface that contains a table where the column widths adjust according to percentage data. I'm using ng-repeat to populate the table, but need help setting unique widths for each piece of data received. Here's some of my Angul ...

javascriptjqueryhtmlcssangularjs

Ensure that the divs are properly aligned with the paragraphs

I received assistance previously, and I am seeking additional help in maintaining the position or adjusting the size of elements to fit different window viewport sizes such as tablets, mobile devices, or varying monitor sizes while keeping the appearance c ...

htmlcssresize

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

javascriptcssstring

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

webtypographycss

Bootstrap Tab Causes Data Loss in my Model upon Being Hidden

While working on converting a button group to a Bootstrap Tab, I encountered an issue where one of my views suddenly stopped appearing. After some investigation, it seems that the Tab is resetting my model when it's hidden. Here's the relevant co ...

angularjstwitter-bootstrap

Reorder elements in CSS Grid

I've been working with a css-grid and it's almost there, but I'm stuck on reordering the items in a specific way. Currently, the html layout is set as “1, 2, 3, 4,…10”, but for smaller screens, I want the visual order to be “1, 2, 4 ...

javascripthtmlcssgridcss-grid

Issue with automatic compiling in Sublime 2 for less2css

Whenever I try to save my style.less file, the automatic compilation doesn't happen. Is there a mistake in how I've set it up? Here's what is currently in my ox.sublime-project file: { "folders": [ { ...

csscompilationlesssublimetext2