How to create input group using bootstrap?

Question

I would like to create an input box group like the following:

title1

name: (input text box)
link: (input text box)

remove this title

title2

name: (input text box)
link: (input text box)

remove this title

And my css is

  <div class="control-group">
    <label class="control-label"><h3>title1</h3></label>
    <label for="inputError" class="control-label">name</label>
    <div class="controls">
        <input class="field span6" type="text" id="newsLinkTxt_1" />
    </div>
    </br>
    <label for="inputError" class="control-label">link</label>
    <div class="controls">
        <input class="field span6" type="text" id="newsLink_1" />
    </div>
    </br>
    <button class="btn" id="removeButton" type="button">remove this</button>
 </div>

The problem is the control-label class will have margin 20 , so the input box will have left margin 20 . However the title1 and the button will align to left, what class should I use for button and the heading in a control-group , or I need to have customized css? Thanks

Could you make a jsfiddle?

poodle
– poodle

2013-10-01 14:13:12 +00:00
Commented Oct 1, 2013 at 14:13 — poodle
– poodle, Commented Oct 1, 2013 at 14:13

Calvin Bramlett · Accepted Answer · 2013-10-01 14:18:15Z

2

I would check out the .form-group or .input-group sections

http://getbootstrap.com/css/#forms

http://getbootstrap.com/components/#input-groups

answered Oct 1, 2013 at 14:18

Calvin Bramlett

1162 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam 'Sacki' Sackfield Over a year ago

can you not use the .form-group class then further modify any other tweaks

EdChum Over a year ago

You should not just post links as links may die, please spell out what the necessary steps are and/or provide sufficient info for an answer in case the link becomes obsolete

Adam 'Sacki' Sackfield · Accepted Answer · 2013-10-01 14:17:47Z

0

can you not use the .form-group class then further modify any other tweaks

answered Oct 1, 2013 at 14:17

Adam 'Sacki' Sackfield

6021 gold badge5 silver badges19 bronze badges

3 Comments

EdChum Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

Adam 'Sacki' Sackfield Over a year ago

but the answer above me is ok? it was acccepted and up voted and says the same

EdChum Over a year ago

It is subtlely different in that links were provided, your answer is a question which does not direct answer the question, merely asking why they did not try a particular method. The OP is free to upvote and accept an answer, even though the answer is ill-formed (in this case link only answers are frowned upon), I will comment on the answer above. Hope this clarifies things

Collectives™ on Stack Overflow

How to create input group using bootstrap?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related