Bootstrap - ASP.NET Core - html

Question

I would like to ask how I can stretch the width throughout the modal form.
Here is my code:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and it shows like this:
input text problem
Is there any way that I could fix this problem.
I think it has something to do with the bootstrap library but I don't know where it is located.

Answer 1

You have to use bootstrap grid system.
#inpt {
width: 100%;
}
.modal-body {
height: 200px;}
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
button
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group col-xs-12">
<input id="inpt" type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 2

Try this:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/KyleMit/0fscmf3L/
Credits: Kyle Mitofsky