• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 423
  • Last Modified:

Getting started with bootstrap, stuck on something too simple

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
Kenny Hopton
Asked:
Kenny Hopton
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
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
 
Kenny HoptonAuthor Commented:
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
 
Kenny HoptonAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Julian HansenCommented:
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
 
Kenny HoptonAuthor Commented:
Gave that a shot. Everything is a good width now but it all stacks up along the left side.
0
 
Julian HansenCommented:
Code / screenshot / link?
0

Featured Post

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.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now