My labels keep appearing above the selects. I want them all on the same line. Pls see the jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/

1. Bootstrap Form Select
2. Bootstrap Style Select Option

1. Buy Custom Select for Twitter Bootstrap 3 by LisaStoz on CodeCanyon. What is this? This is a jQuery plugin extending the functionality of Twitter Bootstrap 3. It allows you to turn a def.
2. The pricing table template using Bootstrap. In this tutorial, a pricing table using Bootstrap and custom CSS is created where you may display the product name or some heading, its features with the flexible number of lines, prominent display of price within a circle for each product or service by using CSS3 etc.

megawac

Bootstrap example of eCommerce Product Detail using HTML, Javascript, jQuery, and CSS. Snippet by uthmansy.

JasonJason

5 Answers

There's a CSS rule in bootstrap that sets the width of .form-control to 100% on small screen sizes. So even when it's floated, it will take the whole width and therefore start on a new line. Good news is you only need a couple lines of CSS to override it:

Hope this simplifies the problem for anyone still facing the issue! http://jsfiddle.net/c3m77ah6/2/

You have to wrap your label around the select. Like this:

And then add the following CSS:

Here is your updated fiddle: Updated Fiddle

SebsemilliaSebsemillia

This problem is so recorrent that there is a Github project solving it

Place their CSS file right after the CSS from Select2

Then you can use the label along with the select

It does work if you use the latest bootstrap:@import url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

And please DON'T FORGET to make the column with result more than 768px. Form-inline works only if screen with more than 768px. (Just drag the column with a mouse a bit)

The issue was with css for

Vadim KirilchukVadim Kirilchuk

form-inline class with form-group will do the job like

demo : http://jsfiddle.net/9arahevn/2/

user889030user889030

Not the answer you're looking for? Browse other questions tagged htmltwitter-bootstrap-3 or ask your own question.

HOW TO

HowTo Home

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Buttons

Alert ButtonsOutline ButtonsSplit ButtonsAnimated ButtonsFading ButtonsButton on ImageSocial Media ButtonsRead More Read LessLoading ButtonsDownload ButtonsPill ButtonsNotification ButtonIcon ButtonsNext/prev ButtonsMore Button in NavBlock ButtonsText ButtonsRound ButtonsScroll To Top Button

Forms

Login FormSignup FormCheckout FormContact FormSocial Login FormRegister FormForm with IconsNewsletterStacked FormResponsive FormPopup FormInline FormClear Input FieldCopy Text to ClipboardAnimated SearchSearch ButtonFullscreen SearchInput Field in NavbarLogin Form in NavbarCustom Checkbox/RadioCustom SelectToggle SwitchCheck CheckboxDetect Caps LockTrigger Button on EnterPassword ValidationToggle Password VisibilityMultiple Step FormAutocomplete

Filters

Filter ListFilter TableFilter ElementsFilter DropdownSort ListSort Table

Tables

Zebra Striped TableResponsive TablesComparison Table

More

Fullscreen VideoModal BoxesTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioToggle Like/DislikeToggle Hide/ShowToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarDevice LookPlaceholder ColorText Selection ColorBullet ColorVertical LineAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Website

Make a WebsiteMake a Website (W3.CSS)Make a Website (BS3)Make a Website (BS4)Center WebsiteContact SectionBig HeaderExample Website

Grid

2 Column Layout3 Column Layout4 Column LayoutExpanding GridList Grid ViewMixed Column LayoutColumn CardsZig Zag LayoutBlog Layout

Google

Google ChartsGoogle Fonts

Converters

Bootstrap Form Select

Convert WeightConvert TemperatureConvert LengthConvert Speed

Bootstrap Style Select Option

Python

Remove List DuplicatesReverse a String