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>
Related
When I click on select box, label is not becoming active. In input boxes, it's working fine.
Is it possible for select box also ? If not, please tell me another method to make it active.
When I click on input box
When I click on select box
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='' class="">Class Incharge</label>
<select class="myselect" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
You can do it with this JS. I just added .lab-active class for input & select fields. When the field is focused, it should be add a class into the label
$(".form-group .lab-active").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
.labelfocus {
color:red;
font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control lab-active' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='' class="">Class Incharge</label>
<select class="myselect lab-active" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control lab-active' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control lab-active' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Check this code. You have to define label for like <label for='class-incharge'> and then you have to give the same id to select tag and class form-control also remained to be added.
like
<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='class-incharge' class="">Class Incharge</label>
<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Just replace this code from <div class="modal fade" line.
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='class-incharge' class="">Class Incharge</label>
<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Js:
$( document ).ready(function() {
$(".form-control.lab-active").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
});
Css:
.labelfocus {
color:red;
font-weight: bold;
}
I created a simple modal, but when I click the button the modal appears at the very top of the page and there is no fade in animation when the modal appears. There is no background behind the modal that covers the entire web application as well. I set the correct classes, but still no luck.
Here is my button:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
The modal itself:
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example is what I would like to achieve:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
Any help is appreciated. Thank you.
I believe that you have simply forgotten to add boostrap CSS + JS or jQuery. Below is a code snippet, with your exact code, but with boostrap CSS + JS and jQuery included. Note that jQuery must be before the boostrap JS link, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
All of that should go in the <head> tag (or at the bottom of the <body> tag)
<!-- Stuff for the <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- end <head> tag -->
<!-- Stuff for the <body> -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
P.S. The result looks better when you expand the snippet before running it, because otherwise the output has a small width which messes things up (which could be an issue on small devices)
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
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>
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>