Distinguishing Between Bootstrap 3.0.3 and 3.2.0

The code displays different output between bootstrap versions 3.0.3 and 3.2.0

<div class="form-inline">
    <div class="form-group">
        <label>Date: </label>
        <input name="startdate" class="form-control" type="date">
    </div>
    <div class="form-group">
        <label>Optional Search String: </label>
        <input class="form-control" type="text">
    </div>
  <div class="form-group" style="vertical-align:bottom">
        <button type="button" class="btn btn-primary">Search</button>
  </div>
</div>

Version 3.0.3 Example for version 3.0.3

Version 3.2.0 Example for version 3.2.0

Is there a way to replicate the same design using the newer version of bootstrap?

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

Instead of setting width: 100%;, consider using width: auto; for the class .form-inline .form-control. Check out the DEMO for reference.

CSS:

.form-inline .form-control {
    width: auto;
}

[UPDATED]

If you only want to apply width:auto; when the viewport is at least 768px wide, you can use this media query: - DEMO

@media (min-width:768px) {
    .form-inline .form-control {
        display:inline-block;
        width:auto;
        vertical-align:middle
    }
}

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

Css Selector in Selenium WebDriver

<div class="card-body"> blah blah </div> <div class="card-body"> <table class="table-striped"> some a anchor </table> </div> <div class="card-body"> <tabl ...

pythoncssselenium

The dropdown menu displaces nearby content

Visit this website for more information To access the blog section, simply click on "BLOG" in the top menu. Once there, look to the right side under the circle logo and select "Dísznövények" from the dropdown menu. Be cautious of long content strings b ...

htmlcss

Enhance video playback by eliminating accidental scrolling through the space bar

When using a video player, I always prefer to pause it by pressing the spacebar. However, this function is not working as expected. The issue at hand is that instead of pausing the video, pressing the space bar causes the page to scroll down unexpectedly ...

javascripthtmlcssvideoscroll

How can I include !important in several CSS values using SCSS?

If I have multiple classes that require the addition of !important to their values, is there an efficient method for achieving this? As a beginner in scss, I apologize if this question has been previously addressed. Unfortunately, my searches have not yiel ...

csssass

What is the best way to implement horizontal scrolling in a div with the "inertia" style?

I recently added horizontal scrolling to my website wikiprop.org, following a tutorial from another website. However, I noticed that my scroll does not have the same inertia/momentum effect where it continues scrolling after a swipe and gradually slows dow ...

htmlcssbootstrap-4frontend

Issue with the dropdown selection menu

I've been customizing a paid template based on this original design: The dropdown menu is causing issues - it doesn't open on mouseover and requires a click to access. Additionally, once the menu is open, there's a problem with closin ...

jqueryhtmlcss

The jQuery script effectively applies a class when needed, but encounters difficulties when trying to remove the class afterwards

Essentially, I am looking for an element that, when clicked, activates a jQuery script to add or remove a specific class (in this case, adding a class that changes the background image CSS attribute) to only that particular element. function readMore( ...

javascriptjqueryhtmlcss

Attempting to relocate the product section beneath the category sections within the sidebar of x-cart 5

Check out this website link: I attempted to rearrange the best seller product section below the category section in the sidebar. I enabled Layout editor mode from the admin end, dragged the best seller products below the category sections, and saved it. I ...

javascriptjqueryhtmlcssx-cart

What is the best way to horizontally scroll to a selected item within a scrollable div using React?

I'm working on a project that involves creating a horizontal scrollable list. The goal is to have the list automatically scroll to the selected item, centering it in the view. While attempting to implement this feature using React, I've encounte ...

javascriptcssreactjs

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

Zurb's Vertical Navigation Bar: A Stylish and Functional Design

I attempted to replicate the left navigation bar from this link: The responsive navigation bar and contents on the right caught my attention. Currently, I am working on a project that requires a similar navigation bar. While I am proficient in HTML and C ...

javascripthtmlcsszurb-foundation-5

Prevent parent element from triggering double click when double clicking on children element with CSS or jQuery

Check out my project demo here Whenever I double click on a child element, it also triggers the parent element at the same time. I want to prevent this behavior so that only the child element is affected by the double click event. Can anyone provide assis ...

javascriptjqueryhtmlcss

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

javascripthtmlcsssafari

Is it possible to place a DIV between the OL and LI tags when creating a two-column ordered list?

I am utilizing the 960.gs framework to create a two-column ordered list with each list item containing a heading and paragraph. My issue is that I want the numbering to go across, not down (e.g., the top row should contain 1, 2 instead of 1, 3). The only ...

htmlcss

I need some guidance on how to create this using CSS, or what keyword should I use to find a similar solution

My client's website requires this specific design, but I am struggling to find a similar CSS format online. Can you provide assistance in creating this layout? Attached is an image for reference: https://i.sstatic.net/gJua4.png ...

css

Tips on creating a stationary header that moves horizontally along with the content:

Check out this website: The website has a fixed header that works fine, but when the window width is reduced or viewed on a mobile device and zoomed in, only the content scrolls horizontally. Is there a way to make the header stay fixed along the Y axis? ...

htmlcss

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

javascripthtmlcssgoogle-chrome

Difficulties arising from displaying errors when submitting empty fields

I am facing an issue with my script - the problem arises when trying to display errors. The error message appears but does not function properly, causing a break after the submit button. Essentially, if the fields are empty, an error should be displayed, a ...

javascripthtmljquerycss

A unique design featuring a Bootstrap table with two horizontal columns of differing lengths in every row

Recently, I decorated a table using bootstrap and created a simple table view (collapsed) to display the data. Each row in the table contains two horizontal sets of data, with the expanded view appearing when the user clicks on the "Details" button. The f ...

htmlcssangularjstwitter-bootstraphtml-table

What is the best way to retrieve an object from d3.data()?

My force directed graph contains a variable with all my link data. var linkData = d3.selectAll(".link").data(); In order to change the class of certain edges based on their values, I am using a for loop to iterate through the data and identify the desire ...

javascriptcssd3.js