ASP.NET MVC 5 bootstrap textbox width size

Question

I want a wider textbox. I have the following code but the textbox is still not that wide. I want it to basically take up 50% of the screen. Basically so it looks like google.com

<div class="row">
    <div class="col-lg-12" style="margin: 5px auto; text-align: center; background-color: Red">
        <input type="text" name="txtVideo" class="form-control input-lg" style="margin: 0px auto" />
    </div>
</div>

I basically want this textbox to be the only thing in this row and to take up 50% of the screen. When I do col-lg-1 it's way to the left. I guess I don't really understand what col-lg-# is all about.

Mohsan · Accepted Answer · 2015-09-21 14:27:50Z

11

Site.css is the culprit

change the max-width value according to your requirement. I spent 3 days in finding out this :P

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 230px;
}

answered Sep 21, 2015 at 14:27

Mohsan

2,5298 gold badges47 silver badges64 bronze badges

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

3 Comments

Anthony Pegram Over a year ago

I must have searched 972 other Stack Overflow questions and answers before seeing Site.css (from this answer) in Google, which finally solved my problem of a curiously non-growing textbox.

Marcel Popescu Over a year ago

Thank you... I too have been searching for this a lot.

Jagdish Chopde Over a year ago

Thank you! Actually, even after removing the max-width setting from site.css it didn't work at first. later figured out that for the movement, browser cache the CSS files. do a hard refresh (Ctrl+F5) or restart the browser. It will work.

Al Ashcroft · Accepted Answer · 2014-09-03 23:51:12Z

0

Bootstrap is based on a grid of 12, so half the screen would be 6. If you want to centre it, you can push it by 3 as well.

<div class="row">        
    <div class="form-group">
        <div class="col-xs-6 col-xs-push-3" >
            <input name="txtVideo" class="form-control" />
        </div>
    </div>
</div>

I specified the size from xs, so if the viewport goes smaller than lg, it will still be 50% of the viewport. If you want it to be 50% when large, and different when smaller, combine the lg, md, sm and xs classes to meet your needs.

answered Sep 3, 2014 at 23:51

Al Ashcroft

1029 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC 5 bootstrap textbox width size

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related