CODEWITHSUNDEEP
asp.net
user441521
user441521

Reputation: 6998

ASP.NET MVC 5 bootstrap textbox width size

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.

Upvotes: 3

Views: 5175

Answers (2)

Mohsan
Mohsan

Reputation: 2509

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;
}

Upvotes: 11

Al Ashcroft
Al Ashcroft

Reputation: 102

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.

Upvotes: 0

Related Questions