Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Getting started with bootstrap, stuck on something too simple

Posted on 2014-10-06
6
358 Views
Last Modified: 2014-10-11
I need to take a bootstrap input group, a bootstrap dropdown button and a bootstrap button and put those three together in a row. I am ok with a fixed width. I then want that 3-item block to center.

I've been treating these three fields as a form with the last button being the submit.

Searched for answers, found this: http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns

Tried things from that demo but the input group keeps starting at left and the buttons either space apart or stack :(

Can anyone write a snippet that does the block and center so that I can get past this stumbling block?
0
Comment
Question by:Kenny Hopton
  • 3
  • 3
6 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40365468
Without a schematic of what you are trying to achieve - what is wrong with this layout?
<div class="row">
   <div class="col-lg-4">&nbsp;</div>
   <div class="col-lg-1 col-centered"> <!-- input group --></div>
   <div class="col-lg-1 col-centered"> <!-- dropdown --></div>
   <div class="col-lg-1 col-centered"> <!-- button --></div>
   <div class="col-lg-4">&nbsp;</div>
</div>

Open in new window

0
 

Author Comment

by:Kenny Hopton
ID: 40369871
Hi Julian. That code causes the fields to gap apart with zooming. I just want them to float left but they refuse to do anything but stack when I float them. I am not really trying to do grid stuff, just use the bootstrap buttons.
0
 

Author Comment

by:Kenny Hopton
ID: 40369891
This is sort of what I'm working with. I want the three fields to float together but have the form centered. Here is a poor visual :)  

-----------------------------------------------------------------------------------------------------------------------
                   [_______DATE__________|__v__]  [___DAYS___]  [_____GO_____]  
-----------------------------------------------------------------------------------------------------------------------
 

    <div class="row">
        <form class="form-horizontal" role="form"  method="GET">
            <div class="form-group">
                    <div class="input-group">
                        <input name="Date" class="form-control"
                                id="Date" type="text"
                                placeholder="Date">
                        <span class="input-group-addon">
                            <i class="glyphicon glyphicon-calendar"></i>
                        </span>
                    </div>
                </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown">
                                Days
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-default" type="submit">Go</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40370073
Might have to go with custom widths - the controls won't be able to auto size themselves.
Put them in a container and give it a margin: 0 auto; to center it.
0
 

Author Comment

by:Kenny Hopton
ID: 40371825
Gave that a shot. Everything is a good width now but it all stacks up along the left side.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40371850
Code / screenshot / link?
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently I spent hours debugging an issue in a Rails project where ActiveRecord was causing MySQL errors trying to create a User object of a class at the top level of a Single Table Inheritance model structure.  It turns out `.create` behaves differ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question