How to reduce width of a form (CSS/HTML)

Question

I have this html page:

<div class="panel panel-default">
    <div class="panel-heading">
        <h1>Usuarios</h1>
    </div>
    <div class="panel-body">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Telefone</th>
                    <th>Email</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let usuario of usuarios | async">
                    <td>{{usuario.nome}}</td>
                    <td>{{usuario.telefone}}</td>
                    <td>{{usuario.email}}</td>
                    <td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
                    <button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

The width is following the navbar, so it's being stretched all the screen:

How can I reduce it to the center of the screen like a have a margin before and after the form?

I want it to be like this:

Can you explain in more detail what you actually want?

Awais
– Awais

2019-12-11 11:48:14 +00:00
Commented Dec 11, 2019 at 11:48 — Awais
– Awais, Commented Dec 11, 2019 at 11:48
did you try margin:0 auto?

Darksymphony
– Darksymphony

2019-12-11 11:49:58 +00:00
Commented Dec 11, 2019 at 11:49 — Darksymphony
– Darksymphony, Commented Dec 11, 2019 at 11:49

Abhishek Pakhare · Accepted Answer · 2019-12-11 12:30:48Z

Looking at your screenshot I guess you are using Materialize CSS:

Try to the form code within below code:

<div class="container">
   <div class="col s12">
      <div class="panel panel-default">
    <div class="panel-heading">
        <h1>Usuarios</h1>
    </div>
    <div class="panel-body">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Telefone</th>
                    <th>Email</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let usuario of usuarios | async">
                    <td>{{usuario.nome}}</td>
                    <td>{{usuario.telefone}}</td>
                    <td>{{usuario.email}}</td>
                    <td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
                    <button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
   </div>
</div>

Nortix Agency · Accepted Answer · 2019-12-11 12:00:12Z

1

Just add this style code:

form {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto
}

answered Dec 11, 2019 at 12:00

Nortix Agency

2111 silver badge7 bronze badges

5 Comments

Nortix Agency Over a year ago

Nortix Agency Over a year ago

as i wrote, an inline style in your form tag. or if you don't like that you should create a separete .css file then link to that

Nortix Agency Over a year ago

if this helped you, i'll appreciate marking my answer as best answer

dm-am Over a year ago

I edited again, i had pasted the code for the form, but the screen is actually the list of users. But tryied your answer and the form was still in the left

Nortix Agency Over a year ago

Oh my God! i realized the issue. put that code for parent div <div class="panel panel-default" style="max-width: 900px;margin-left:auto;margin-right: auto" >

Collectives™ on Stack Overflow

How to reduce width of a form (CSS/HTML)

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related