Solved

Getting started with bootstrap, stuck on something too simple

Posted on 2014-10-06
6
376 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
[X]
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
  • 3
  • 3
6 Comments
 
LVL 57

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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 57

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 57

Expert Comment

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

Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

696 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