Im pretty new to coding and i've been trying to make a wepage that works as a user interface. In the UI there is buttons that is suppose to launch application using javaScript (not quite there yet) and 2 buttons that open modals on top of the current screen: Help and Settings.
Code for the modals:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
The issue is, that the first modal works fine. Second modal only "dims" the background, but the modal it self wont come visible. In this case, the settings work fine, but the help does not. If swap the help code before the settings code, then help works and settings does not.
But, when i coded it, i had typo. The second div of the modal were typed
instead of but everything worked, after i switched the
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name: </label>
<input type="text" id="wlanName" size="15">
<label>Passphrase: </label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You forgot to mention </div>
hope this works.
You had missing closing tags for your modal divs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I want to have an input text with 2 buttons beside of it in the modal footer, those 2 buttons must have the same height with the input text, how to show it properly?
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="row justify-content-lg-between">
<div class="col-md-8">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="col-md-2 text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-2 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Add tag wrap 2 button and set d-flex justify-content-center:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="d-flex flex-row justify-content-lg-between">
<div class="col-md-8 mx-5">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="d-flex justify-content-lg-center">
<div class="text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-1 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am developing a Flask web app and I need to setup a scenario with bootstrap modals. I need to open a modal according to the radio button my user checked. My user will check a radio button then click 'OK' and I need a certain modal to pop. How can I handle this ? I used data-target for the moment.
My html code :
<div class="container">
<!-- Modal -->
<div class="modal fade" id="modalchoix" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
</div>
<div class="modal-body">
<input type="radio" id="referentiel" name="choixmaj" value="referentiel">
<label for="referentiel"> CHOIX A</label><br>
<input type="radio" id="transco" name="choixmaj" value="transco">
<label for="transco"> CHOIX B</label><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalrefmodeles">OK</button>
</div>
</div>
</div>
</div>
</div>
Thank you
With the code below you will be able to switch the modal according to the radio button value. This will be fully dynamic, even ids of modals are dynamic. Of course if you know Jquery well, you can do further stuff.
By default, I have removed the id from modal and set it dynamic with each click.
For now this code is working with radio button click. You can do it with another button as well.
In this situation the modal is only one, but you can set it different for each radio button value before appearing the modal. And you can set it according to your needs.
$('input[type=radio]').on('click', function() {
var val = $(this, ':checked').val();
$('div.modal.fade').attr('id', val);
$('#' + val).find('.modal-body').text(val);
$('#' + val).modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container">
<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
</div>
<div class="modal-body">
Hello
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default">OK</button>
</div>
</div>
</div>
</div>
<input type="radio" id="referentiel" name="choixmaj" value="referentiel">
<label for="referentiel"> CHOIX A</label><br>
<input type="radio" id="transco" name="choixmaj" value="transco">
<label for="transco"> CHOIX B</label><br>
</div>
You can do it with Javascript.
Here I have two modals, with different id's.
The first modal id is yesModal and The second modal id is noModal.
Whenever you change your radio, JS is switch data-target from yesModal to noModal and visa versa.
document.querySelectorAll('input[name="radio"]').forEach(cur => {
cur.addEventListener('change', e => {
const value = document.querySelector('input[name="radio"]:checked').value;
if (value === 'yes') {
document.querySelector('#reactAccRadio').setAttribute('data-target', '#yesModal');
} else if (value === 'no') {
document.querySelector('#reactAccRadio').setAttribute('data-target', '#noModal');
}
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<form id="formSubmit" action="#" method="POST">
<div class="form-group">
<input type="radio" name="radio" value="yes" checked> Open Yes Modal
<input type="radio" name="radio" value="no"> Open No Modal
</div>
<button id="reactAccRadio" type="button" class="btn btn-primary" data-toggle="modal" data-target="#yesModal">Submit</button>
</form>
<!-- Modal -->
<div class="modal fade" id="yesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">If yes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="noModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">If no</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I am using bootstrap, My scenario is as follows:
There is a button, on clicking button I am opening up a popup and in that popup there is a button that is again opening up a new popup. Now I am trying to disable outside click when my popups are open. However when first popup is open then I have already disabled the outside click, but when it is not happening for 2nd popup.
I have used these attributes on button:
<button type="button" name="delete" class="btnbmbm" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">Delete Me </button>
And here is complete html file:
<div class="page account-page customer-info-page customer-delete-info">
<div class="page-body">
<div class="form-fields">
<input type="hidden" value="#ViewBag.CustomerId" id="customerId" />
<div class="del-section">
#await Component.InvokeAsync("TopicBlock", new { systemName = "DeleteInformation" })
</div>
<div class="buttons">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteMe")
</button>
</div>
</div>
<div id="delete-user-confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-title">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">#T("Plugins.Tmotions.GDPR.User.DeleteConfirmation")</h4>
</div>
<div class="form-horizontal">
<div class="modal-body">
#T("Plugins.Tmotions.GDPR.User.DeleteWarning")
</div>
<div class="modal-footer">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" id="delete-confirm" data-target="delete-user-done" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteYes")
</button>
<button type="button" class="btn btn-primary btn-search" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> #T("Plugins.Tmotions.GDPR.User.DeleteNo")</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="delete-user-done" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-done-title">
<div class="modal-dialog">
<div class="modal-content">
#*<div class="modal-header">
<button type="button" class="close delete-ok"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>*#
<div class="form-horizontal">
<div class="modal-body">
<p class="delete-user-notification"></p>
<p> </p>
<p> #T("Plugins.Tmotions.GDPR.User.DeleteUserNotification2")</p>
</div>
<div class="modal-footer">
#T("Plugins.Tmotions.GDPR.User.Ok")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Your code is fine. Your second modal doesn't close when clicked outside. Check the snippet. All you are missing is the # on your data-target attribute on your button.
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" id="delete-confirm" data-target="#delete-user-done" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteYes")
</button>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page account-page customer-info-page customer-delete-info">
<div class="page-body">
<div class="form-fields">
<input type="hidden" value="#ViewBag.CustomerId" id="customerId" />
<div class="del-section">
#await Component.InvokeAsync("TopicBlock", new { systemName = "DeleteInformation" })
</div>
<div class="buttons">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteMe")
</button>
</div>
</div>
<div id="delete-user-confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-title">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">#T("Plugins.Tmotions.GDPR.User.DeleteConfirmation")</h4>
</div>
<div class="form-horizontal">
<div class="modal-body">
#T("Plugins.Tmotions.GDPR.User.DeleteWarning")
</div>
<div class="modal-footer">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" id="delete-confirm" data-target="#delete-user-done" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteYes")
</button>
<button type="button" class="btn btn-primary btn-search" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> #T("Plugins.Tmotions.GDPR.User.DeleteNo")</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="delete-user-done" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-done-title">
<div class="modal-dialog">
<div class="modal-content">
#*<div class="modal-header">
<button type="button" class="close delete-ok"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>*#
<div class="form-horizontal">
<div class="modal-body">
<p class="delete-user-notification"></p>
<p> </p>
<p> #T("Plugins.Tmotions.GDPR.User.DeleteUserNotification2")</p>
</div>
<div class="modal-footer">
#T("Plugins.Tmotions.GDPR.User.Ok")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
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.
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>
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
I want to arrange a html page using bootstrap functionality, but a div is at the top of the page and the other divs are at the bottom when I put them in a container. What is the proper way to arrange a page using bootstrap ?
This is my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Settings</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
<div class="employee"><i class="fa fa-home"></i></div>
<div class="employee"><i class="fa fa-info"></i><!--Summary--></div>
<div class="employee"><i class="fa fa-globe"></i><!--Plan details--></div>
<div class="employee"><i class="fa fa-building-o"></i><!--Company holidays--></div>
<div class="employee"><i class="fa fa-calendar-check-o"></i><!--Team calendar-->
</div>
<div id="manager"><a href="pendingRequests.html"><i class="fa fa-clock-o"><span
class="badge badge-notify hidden"></span></i></a><!--Pending requests--></div>
<div id="hr"><i class="fa fa-cog"></i><!--Settings button--></div>
<div class="employee"><i class="fa fa-power-off"></i></div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
Create user
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addLocation" class="btn-success btn">Create location</button>
</div>
</div>
<div>
<div class="col-xs-12">
<button id="addRole" class="btn-success btn">Create role</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addDepartment" class="btn-success btn">Create department</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
</div>
</div>
<div class="row">
<h4 id="successMessage"></h4>
</div>
</div>
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Location name</h4>
</div>
<div class="modal-body">
<form id="locationForm">
<input type="text" required='' id="locationName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="locationBtn" value="Add new location"/>
<div id="alert" style='float: left; color: red'></div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Role name</h4>
</div>
<div class="modal-body">
<form id="roleForm">
<input type="text" required='' id="roleName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="roleBtn" value="Add new role"/>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Department name</h4>
</div>
<div class="modal-body">
<form id="departmentForm">
<input type="text" required='' id="departmentName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="departmentBtn" value="Add new department"/>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="js/notify.js"></script>
</body>
</html>
And this is how it is arranged:
because you've put them all in a separate row. what you need to do is, put them in the same row and also, your col-xs-12 doesn't really do anything here to make it in a row. so you need to specify in your html that you want the buttons to be inline on larger screens like desktops.
if you want your buttons in a row on desktop, you need to put them in rows that'd fit.
let's say you have 6 buttons. then you can use col-md-2 as 12/6 = 2. or depending upon the length of these links/buttons you can change x in col-md-x.
here. this plunk will show what i mean. you might have to enlarge the preview panel.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-2">
Create user
</div>
<div class="col-xs-12 col-md-2">
<button id="addLocation" class="btn-success btn">Create location</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addRole" class="btn-success btn">Create role</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addDepartment" class="btn-success btn">Create department</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
</div>
</div>
<div class="row">
<h4 id="successMessage"></h4>
</div>
</div>