CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

making text to go beside label in bootstrap form

I wrote a simple bootstrap form as shown here. I want text to go beside the label, my CSS isn't working.
HTML code: 

    <title>Bootstrap 101 Template</title>
<div class="col-md-6">
    <label>Enter the name</label>
    <div class="col-sm-4 ippos">
        <input type="text" class="form-control" placeholder="Name, please!" />
    </div>
</div>

How can I do it? How can I override form-control's properties?

Upvotes: 0

Views: 321

Answers (2)

Ad Wicks
Ad Wicks

Reputation: 300

Bootstrap 3 has a class for form elements called form-horizontal that makes label elements go inline with the form inputs. You could use a mixture of width and display inline in your css but bootstrap supplies you with a clean and custom css free way of doing this. To see it and how it works visit the bootstrap docs for form-horizontal

Your code could look something like this:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="control-label col-xs-4">Enter the name</label>
        <div class="col-xs-8">
            <input type="text" class="form-control" placeholder="Name, please!">
        </div>
     </div>
</form>

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

I am not sure why it is not working out. Try this, may be:

HTML

<title>Bootstrap 101 Template</title>
<div class="col-md-6">
    <label>Enter the name</label>
    <input type="text" class="form-control inline" placeholder="Name, please!" />
</div>

CSS

label {display: inline-block;}
.form-control.inline {display: inline-block; width: 200px;}

Let me know in the comments, if it doesn't work!

Fiddle: https://jsfiddle.net/rpgf10ks/3/

Upvotes: 0

Related Questions