I want to show the table inside the MODAL of pop up of full length.But it is coming in the center with just fixed length.I have used the css but dont know what is wrong.I need to show the table of 100% length inside the MODAl.please someone help me to structure the table.I have used bootstrap table and getting such error.
[![<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
.table {
border-radius: 5px;
width: 50%;
margin: 0px auto;
float: none;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 25px; margin-bottom: 30px; text-transform: none;">
<form class="form-inline" action="">
<div class="form-group">
<label for="test" class="col-sm-3 control-label">ClientId</label>
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
<div class="form-group">
<button type="button" id="go" class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span></button>
</div>
</form>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<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">Modal title</h4>
</div>
<div class="modal-body" >
<!--div class="container"-->
<h2>Basic Table</h2>
<div class="table-responsive" id="holder-table">
<!--TAble COntent-->
</div>
<!--/div-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text-->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<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>
<h3 class="modal-title modal-title-or">
Edit
Relative
</h3>
</div>
<form id="relativeFormEdit" class="form-horizontal">
<div class="modal-body">
<!--form body-->
<div class="form-group ">
<div class="row">
<label class="control-label col-md-4">Name:</label>
<div class="col-md-6">
<input name="name" title="Name" class="form-control">
</div>
</div>
<div class="row">
<label class="control-label col-md-4">Age:</label>
<div class="col-md-6">
<input name="age" title="age" class="form-control">
</div>
</div>
<div class="row">
<label class="control-label col-md-4">Cid:</label>
<div class="col-md-6">
<input name="cid" title="cid" class="form-control">
</div>
</div>
<div class="col-md-10">
<button type="button" class="btn btn-info btn pull-right" id="search" >
<span class="glyphicon glyphicon-search"></span>Search
</button>
</div>
<div id="holder-table1">
<!--table content-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</form>
<div class="table-responsive">
<table id="tableModel" style="display:none" class="table table-hover table-striped table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Cid</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>10</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>11</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>12</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$('#go').click(function() {
var test1 = $('#test').val();
if (test1 === "") {
$("#tableModel").css({display: "block"});
$('#holder-table1').append($("#tableModel"));
$('#\\#myModal1').modal('show');
$('#holder-table1').hide();
}
else{
$("#tableModel").css({display: "block"});
$('#holder-table').append($("#tableModel"));
$('#\\#myModal').modal('show');
}
$('#search').click(function() {
$("#tableModel").css({display: "block"});
$("#holder-table1").show();
});
});
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>][1]][1]
try this
<style type="text/css">
.table {
border-radius: 5px;
width: 100%;
margin: 0px auto;
float: none;
}
</style>
and use inline-table instead of block in css
<table id="tableModel" style="display:inline-table" class="table table-hover table-striped table-condensed" >
if (test1 === "") {
$("#tableModel").css({display: "inline-table"});
$('#holder-table1').append($("#tableModel"));
$('#\\#myModal1').modal('show');
$('#holder-table1').hide();
}
else{
$("#tableModel").css({display: "inline-table"});
$('#holder-table').append($("#tableModel"));
$('#\\#myModal').modal('show');
}
$('#search').click(function() {
$("#tableModel").css({display: "inline-table"});
$("#holder-table1").show();
});
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 have an HTML page with lay out something like this:
The problem is. I want the MSAN and Users column in the same row, otherwise, for a large number of records, it won't be suitable. this is my HTML File. Ignore how the values are being shown or which.
<div class="panel panel-default">
<div class="panel-heading">
<br>
<h1 style="text-align: center">License Generator</h1><br>
<div class="row" [hidden]="!deleteMessage">
<!--<div class="col-sm-4"></div> -->
<div> <!---->
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>License Deleted</strong>
</div>
</div>
<!-- <div class="col-sm-4"></div> -->
</div>
</div>
<div class="panel-body">
<table class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" >
<thead class="thead-light">
<tr>
<th>Customer ID</th>
<th>Hardware Key</th>
<th>Product</th>
<th>License Key</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students ">
<td>33333</td>
<td>22222</td>
<td>ABC</td>
<td><textarea rows="2" cols="20" wrap="hard">fxLBJ0BF5b+CLBCW9xamqsCgP0AyVIVpCCiYGI3WfEOAPPB7nVgHipERQmv2wVJYQI9PwfpS+4qP5owl4eDfI/f42cbu+SBTty3Sk/sGzZfon1xUndfAzsqbHD/DbFjQAtbpzeB7yr7AtNSV22WBv/lwC4ZW0k1KGR44tNM8aW5UQf9/WmuKeM/dFKIiW6vKMd9dn35jJ5AdlUIBRKwTFg==</textarea></td>
<td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>
<button (click)="updateStudent(student.student_id)" class='btn btn-primary'
data-toggle="modal" data-target="#myModal">Update</button>
<button (click)="updateStudent(student.student_id)" class='btn btn-primary'
data-toggle="modal" data-target="#myModal">Copy License Key</button>
</td>
</tr>
</tbody><br>
<thead class="thead-light">
<tr>
<th>Max MSAN</th>
<th>Max Users</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students ">
<td>10000</td>
<td>10000</td>
</tr>
</tbody><br>
</table>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" style="text-align: center">Update Student</h4>
</div>
<!-- Modal body -->
<div class="modal-body" *ngFor="let student of studentlist " >
<div [hidden]="isupdated">
<input type="hidden" class="form-control" formControlName="student_id" [(ngModel)]="student.student_id">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name" >
</div>
<div class="form-group">
<label for="name">Student Email</label>
<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
</div>
<div class="form-group">
<label for="name">Student Branch</label>
<select class="form-control" formControlName="student_branch" required>
<option value="B-Tech" [selected]="'B-Tech' == student.student_branch">ZMS</option>
</select>
</div>
</div>
<div [hidden]="!isupdated">
<h4>Student Detail Updated!</h4>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer" >
<button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>
</div>
</form>
</div>
</div>
</div>
There is nothing in the CSS file. If I try to keep all columns in same , then I lose the Search field and the number of entries data. I have taken help of a Spring Boot project from a website and got this, but not able to get this done. Please help. Stuck on this for hours.
try to add white-space:nowrap; to all the td and I think it should solve the problem
this is what nowrap does:
Sequences of whitespace will collapse into a single whitespace. Text
will never wrap to the next line. The text continues on the same line
until a tag is encountered.took from w3school
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<b>ADMIN GATEWAY</b>
</a>
</div>
<!-- <div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
WHO
</li>
<li>
WHAT
</li>
<li>
WHERE
</li>
</ul>
</div> -->
</div>
</nav>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<div class="container-fluid">
<!-- <p align="right">Add a connection</p> -->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg btn pull-right" data-toggle="modal" data-target="#myModal" onclick="getConnections()">Add Connection</button>
<!-- Modal -->
<div class="modal fade" align="right" id="myModal" 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 styleit">Send connection Request </h4>
</div>
<div class="modal-body">
<!-- my drop down starts here-->
<div class="dropdown pull-left createspace select select-div">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the type
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left">
<li id="api">
API
</li>
<li id="socket">
SOCKET
</li>
</ul>
</div>
<!-- my drop down ends here-->
<form>
<div class="form-group col-sm-8">
<input type="text" class="form-control" placeholder="Enter IpAddress" id="ip" name="api">
<div class="form-group">
<label for="usr">Network Name</label>
Network Name
<input type="text" class="form-control" placeholder="Enter Class Name" id="port" name="socket">
</div>
<div class="form-group">
<label for="usr">Network Name</label>
Network Name
<input type="text" class="form-control" placeholder="Enter the Port Number" id="type" name="socket">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Send</button> -->
<input type="submit" value="send request" id="submit-req" name="submit" class="btn btn-primary" data-dismiss="modal" onsubmit="sendDetails()">
</div>
</div>
</div>
</div>
<!-- start of the table -->
<div class="row">
<div class="col-sm-7">
<table class="table table-bordered table-responsive" id="gateway-table ">
<thead>
<tr>
<th>nodeId</th>
<th>type</th>
<th>remoteAddress</th>
<th>remotePort</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-sm-7">
<table class="table table-bordered table-responsive" id="gateway-table ">
<thead>
<tr>
<th>nodeId</th>
<th>type</th>
<th>remoteAddress</th>
<th>remotePort</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- end of the table -->
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center ">
<p>my own company
*
</p>
</footer>
In the above code, I wanted to add two responsive tables aligned parallel to each other with a vertical scrollbar. I have tried col-sm-7 for both rows but it is not working. The scrollbar doesn't show up after adding overflow-y: auto for the table. Can someone help me to figure out where I am going wrong?
I designed modal. Which contains text boxes. In first row there are two text boxes and there column its button called add another. And in second row there are three text boxes and following rows same.In mobile view the content is floating of the box. I need to show text boxes in the modal. please help
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<button type="button" class="close" data-dismiss="modal">
<font color="black"> <a href="hrtoolkit.html" style="color:darkred">
<span style="color:darkred;">×</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit View Save</label>
<br /><br />
<table id="table1">
<tbody>
<tr>
<td></td>
<td ><input type="text" placeholder="10th"/></td>
<td > <input type="text" placeholder="Degree" /></td>
<td > <button type="button" class="btn btn-default "
data-toggle="collapse" data-target="#filter-panel"
style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add
Another</button>
</td>
</tr>
<tr>
<td >Stream<input type="text" placeholder="Stream"/></td>
<td > Institution<input type="text" placeholder="Institution" /></td>
<td >Yr of Passing <input type="text" placeholder="Yr of Passing" /></td>
</div>
</tr>
<tr>
<td >State<input type="text" placeholder="State"/></td>
<td >Country <input type="text" placeholder="Country" /></td>
<td > <input type="file" /></td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have done this for you
.form-body {
overflow-x: scroll;
}
table tbody tr td {
padding: 0 10px;
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="">
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<button type="button" class="close" data-dismiss="modal">
<font color="black"> <a href="hrtoolkit.html" style="color:darkred">
<span style="color:darkred;">×</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit View Save</label>
<br />
<br />
<table id="table1">
<tbody>
<tr>
<td></td>
<td>
<input type="text" placeholder="10th" />
</td>
<td>
<input type="text" placeholder="Degree" />
</td>
<td>
<button type="button" class="btn btn-default " data-toggle="collapse" data-target="#filter-panel" style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add Another
</button>
</td>
</tr>
<tr>
<td>Stream
<input type="text" placeholder="Stream" />
</td>
<td> Institution
<input type="text" placeholder="Institution" />
</td>
<td>Yr of Passing
<input type="text" placeholder="Yr of Passing" />
</td>
</tr>
<tr>
<td>State
<input type="text" placeholder="State" />
</td>
<td>Country
<input type="text" placeholder="Country" />
</td>
<td>
<input type="file" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</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>