Need to enlarge text input bootstrap

Question

I have been struggling with making the text input field 'txtProduct' larger. I have had some mild success but it seems the inline nature of the fields are prohibiting me from doing this properly using bootstrap. I'd imagine it's a simple fix but I am not a front end person. Please make any suggestions. I would like it to be something like col-md-10 or something around there...

I need the first text field much larger.

<div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <p class="lead">xxxxx</p>
            <form class="form-inline">
                <div class="form-group col-xs-push-10 col-md-pull-10">
                        <input class="form-control input-lg" id="txtProduct" name="txtProduct" type="text" placeholder="e.g. ALFALFA SPROUTS" autocomplete="on">
                    </div>
                <div class="form-group">
                    @Html.DropDownListFor(x => x.Markets, new SelectList(Model.Markets, "Value", "Text"), new { @class = "form-control input-lg" })
                </div>
                <button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-search"></span></button>
            </form>
          <div id="status" name="status"></div>
        </div>
        <div class="col-md-2"></div>
    </div>

cssyphus · Accepted Answer · 2016-03-19 03:26:30Z

1

This might do it. Either incorporate into your CSS file, or paste it in the body at top:

<style>
    .input-lg {font-size:2rem;padding:3px 7px;}
</style>

Experiment with font-size -- that is primarily what makes the input field larger, although you can also use height:2rem; and width:3rem; to size the field without changing text size.

Also, know the difference between px, em, rem and vw/vh in font-size. Lots of good explanation google-able, especially from css-tricks.com.

answered Mar 19, 2016 at 3:26

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

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

Comments

hmjha · Accepted Answer · 2016-03-19 03:57:03Z

1

You can try this for making input type text element font size enlargement.

input[type='text']{
 font-size: 20px;
}

answered Mar 19, 2016 at 3:57

hmjha

4872 gold badges6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Need to enlarge text input bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related