CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Austin
Austin

Reputation: 3080

Make button width 100%, MVC 5 Bootstrap 3

I am new to learning bootstrap and loving it! However I cannot seem to find an easy guide to edit the massive bootstrap.css for custom items, such as a button.

What I want to do is expand my "Create" so that it fills the entire table row it is currently on.

Code for my Edit View, I am trying to make the create button at the top 100% across the top of the table.

@model IEnumerable<WebApplication2.Entities.Employee>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Employees</h3>
    </div>

        <div class="btn-group btn-group-lg" id="CreateButton">
            <button type="button" class="btn btn-success" onclick="location.href='@Url.Action("Create")';return false;">Create</button>
        </div>


    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Birthday)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Birthday)
                </td>
                <td>

                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </td>
            </tr>
        }

    </table>
</div>

Here is the actual page currently as is. enter image description here

If anyone could explain where you are inserting this code/css I would be eternally grateful as my guess and check method within bootstrap.css isn't working. haha

Thank you!

Upvotes: 2

Views: 11232

Answers (3)

Carrie Kendall
Carrie Kendall

Reputation: 11225

This can be done with no extra style using Bootstrap's grid and the class btn-block.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Employees</h3>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <button type="button" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;">Create</button>
        </div>
    </div>

    <table class="table">
    <!-- ... -->

Here is a small demo.

Upvotes: 16

krillgar
krillgar

Reputation: 12805

If you don't want to add any extra CSS (it shouldn't be something you're afraid to do, but as was stated in the comments of James' answer, it should be in a separate file), you can use the classes that exist in the bootstrap css file.

Carrie's answer is missing one step. You need the "col" class on the button as well:

<div class="row">
    <div class="col-md-12">
        <button type="button" class="btn btn-success col-md-12" ...>Create</button>
    </div>
</div>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

Simply add this to your CSS:

#CreateButton button {
    display: block;
    width: 100%;
}

Upvotes: 1

Related Questions