Table <tr> space not change [duplicate] - html

This question already has answers here:
How to add a margin to a table row <tr> [duplicate]
(18 answers)
Closed 5 years ago.
I try to put small space in table <tr> but I can't do it, I try to do that, but not change it, how can I fix it? To understand about my question look at this image:
.panel-booking .panel-body {
padding: 0px;
height: 100px;
}
.panel-booking {
top:-60px; position:relative;
}
.tab-tb2 .nav-tabs li a {border-left: 1px solid #bfc1c3;height: 25px;}
#line-booking hr{margin-top: -45px; margin-left: 1px; width: 408px;color: #f00;
background-color: #ececec;
height: 1px;}
.booking-left-btn tr {line-height:30px;}
.booking-left-btn table, th, td {
}
.booking-left-btn th, td {
padding: 5px;
text-align: left;
}
.booking-left-btn .btn {
display: inline-block;
padding: 12px 7px;
margin-bottom: 21px;
font-size: 14px;
margin-left: -15px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
background-color: none;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid #bdc4cb;
border-radius: 10px;
}
.booking-left-btn .room-detials {
text-align: center;
margin-left: -2px; color: #53585f;
}
.booking-left-btn .room-number {
text-align: center;
font-size: 15px;
color: #444444;
}
.booking-left-btn .panel-default {
border-color: #ddd;
height: 67px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-ie-border-radius: 12px;
-opera-border-radius: 12px;
-chrome-border-radius: 12px;
border-radius: 11px;
overflow: hidden;
width: 329px;
margin-left: -5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-booking">
<div class="booking-left-btn" style="margin-left:25px;">
<table style="width:100%">
<tr>
<td><button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Mahesh H</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
</table>
</div>
</div>

can you try using This can be used as trick

Use
<div class="panel-body"> Panel Content</div>
If in between table then use cellspacing="20" in your table tag

Related

Make div stay in one place no matter how matter the height of the page

I have two div's that I want to have equal height. The left div has dynamic content which can expand vertically with any number of inner div's. The right div has one inner div that needs to stay at the top and still be visible no matter how far you scroll down. Please look at this codepen
#shipping_policies {
border: 1px solid #000000;
padding: 5px;
}
#shipping_policies a {
display: block;
font-size: .9em;
text-decoration: underline;
}
.checkout .card-header {
background-color: #f2f2f2 !important;
}
.checkout button {
color: #000;
font-size: 0.6em;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
line-height: 100px;
text-align: center;
}
.square1 p {
color: #FFFFFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-5 h-auto">
<div class="" style="">
<div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
<div style="width: 150px;" class="py-2 d-inline">
<div class="float-left">
<img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
<a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
</div>
<div class="float-left ml-3 mt-1">
<p class="px-0 mb-0">short_desc</p>
<p class="px-0 mb-0">UOM</p>
<label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
<input type="text" class="quantity" name="quantity" value="1">
</div>
</div>
<div style="position: absolute; right: 10px; bottom: 1px;">
<p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
</div>
</div>
<div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
<div style="width: 150px;" class="py-2 d-inline">
<div class="float-left">
<img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
<a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
</div>
<div class="float-left ml-3 mt-1">
<p class="px-0 mb-0">short_desc</p>
<p class="px-0 mb-0">UOM</p>
<label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
<input type="text" class="quantity" name="quantity" value="1">
</div>
</div>
<div style="position: absolute; right: 10px; bottom: 1px;">
<p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
</div>
</div>
</div>
<div class="" style="">
<div class="col-4 border-danger float-left ml-4" style="background-color: #f2f2f2; border-radius: 4px;">
<div class="w-100 mt-2">
<span>Subtotal</span>
<p class="float-right">$399.99</p>
</div>
<div class="w-100 mt-4">
<h4 style="font-weight: bold; margin-bottom: 0">Estimated Total</h4>
<p class="float-right" style="font-size: large; font-weight: bold;">$399.99</p>
<p class="" style="font-size: smaller">Tax Calculated at Checkout</p>
</div>
<hr style="height: 2px; color: #000; background: #000;" />
<div class="w-100">
<input class="w-100" style="height: 40px;" type="text" id="promo" name="promo" placeholder="Enter Promo Code" />
<button style="position: absolute; right: 8%; bottom: 34%; background-color: #0066CC; color: #FFFFFF;">Apply Now</button>
</div>
<hr style="height: 5px; color: #000; background: #0066CC;" />
<a class="w-100 mb-2 btn" style="background-color: #febd69;" href="http://groves.local/product/checkout">CHECKOUT</a>
</div>
<div class="float-right" style="margin-right: 15%; margin-top: 2%; width: 340px;">
<h5 style="font-weight: bold;">Shipping & Policies</h5>
<div id="shipping_policies">
Shipping
Policies
</div>
</div>
</div>
<div>
This code snippet is where I have gotten so far any help is greatly appreciated.
Added a class .fixed with position:fixed to the element that should stay on one place, also fixed your html layout. See https://codepen.io/anon/pen/joYmvV?editors=1100
Update:
You can also add position:sticky instead of position:fixed - It produces a nice effect. See the updated code https://codepen.io/anon/pen/joYmvV?editors=1100
Use position fixed. Position fixed makes it so that an element stays at it's specified place even if the user scrolls up or down.

How to get the bottom most div to stop floating at the footer

I have three divs floating on the right and the position is fixed. I would like the bottom most div to stop when it reaches the footer; however, it goes behind the footer and gets covered. I have been trying to fix this for some time but can't figure it out.. The footer is set at position: relative and the width is set too 100%.
.sidebar-sticky {
margin-right: 9px;
position: fixed;
margin-left: 800px;
}
.sidebar-sticky2 {
margin-right: 9px;
position: fixed;
margin-left: 800px;
margin-top: 350px;
}
.sidebar-sticky3 {
margin-right: 9px;
margin-left: -340px;
margin-top: 605px;
position: fixed;
}
<!-- Office Reservation -->
<asp:Panel ID="pnl_In_Out" runat="server">
<div class="sidebar-sticky">
<!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
<%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
<div class="office-reservation">
<div class="panel-main panel-primary">
<div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">OFFICE RESERVATION</div>
<hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
<%--<div class="divider-line" style="width: 90px; border-top: 1px solid #ddd; text-align: center; margin: 0px 50px 0px 70px;"></div>--%>
<div class="panel-body">
<div class="row">
<div class="form-group" style="padding-left: 5px; text-align: left">
<label class="control-label" style="padding-left: 20px; text-align: left; font-size: 14px; color: #444;"><b>In</b></label>
<div class="input-group">
<div class="col-md-12">
<div class="textarea-form">
<asp:TextBox ID="txt_SearchDateFrom" CssClass="form-control form-control-inline input-small date-picker" runat="server"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" style="padding: 3px;"></span>
</span>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="">
<%--<asp:TextBox ID="txt_SearchTimeFrom" CssClass="form-control" Width="145" runat="server"></asp:TextBox>--%>
<asp:DropDownList ID="ddl_SearchTimeFrom" CssClass="form-control text-right" Width="145" Height="35" runat="server"></asp:DropDownList>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" style="padding: 3px; width: 20px"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group" style="padding-left: 5px; text-align: left">
<label class="control-label" style="padding-left: 20px; text-align: left; font-size: 14px; color: #444;"><b>Out</b></label>
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:TextBox ID="txt_SearchDateTo" CssClass="form-control form-control-inline input-small date-picker" runat="server"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" style="padding: 3px"></span>
</span>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="">
<%--<asp:TextBox ID="txt_SearchTimeTo" CssClass="form-control timepicker timepicker-no-seconds" Width="145" runat="server"></asp:TextBox>--%>
<asp:DropDownList ID="ddl_SearchTimeTo" CssClass="form-control" Width="145" Height="35" runat="server"></asp:DropDownList>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" style="padding: 3px; width:20px"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="wigdet_input_box" style="padding-top: 5px;">
<asp:Button ID="btn_Reserve" runat="server" Text="RESERVE" CssClass="btn btn-danger" Width="50%" OnClick="btn_Reserve_Time_Click" />
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
<!-- QUICK CONTACT FORM -->
<asp:Panel ID="pnl_Question" runat="server">
<!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
<%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
<div class="sidebar-sticky2">
<div class="panel-main panel-primary">
<div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">QUESTIONS ?</div>
<hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
<div class="panel-body">
<div class="row">
<div class="form-group" style="padding-left: 5px; text-align: left">
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:TextBox ID="txt_Email" CssClass="form-control" Width="145" Font-Size="Small" runat="server" placeholder="Email Address"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope" style="padding: 3px"></span>
</span>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:TextBox ID="txt_Message" TextMode="multiline" Rows="3" Font-Size="Small" CssClass="form-control" class="contact-message" Style="width: 100%!important; height: 70px; resize: none;" runat="server" placeholder="Enter Message"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<div class="wigdet_input_box" style="padding-top: 5px;">
<asp:Button ID="btn_Message_Send" runat="server" Text="SEND" CssClass="btn btn-danger" Width="50%" OnClick="btn_Message_Send_Click" />
</div>
</div>
</div>
</div>
</asp:Panel>
<!-- CONTACT INFORMATION -->
<asp:Panel ID="Panel1" runat="server">
<!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
<%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
<div class="sidebar-sticky3">
<div class="panel-main panel-primary">
<div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">AGENT INFORMATION</div>
<hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
<div class="panel-body"">
<%--<div class="agent-photo">
<img src="/images/agent_face.jpg" width="80" alt="Agent" style="float: left;" />
</div>--%>
<div class="contact-info" style="text-align: center; color: #444; font-size: 14px;">
<%--<img src="/images/agent_face.jpg" width="150" alt="Agent" />--%>
<h5>Contact Number: </h5><asp:Label ID="lbl_ListingContactPhone" runat="server" Text="none"></asp:Label>
<h5>E-mail Address: </h5><asp:Label ID="lbl_ListingContactEmail" runat="server" Text="none"></asp:Label>
</div>
</div>
</div>
</div>
jQuery(document).ready(function() {
var el = jQuery('#sidebar');
top_offset = jQuery('#sidebar').offset().top - 60;
var box_height = el.height();
jQuery(window).scroll(function() {
var scroll_top = jQuery(window).scrollTop();
var bottom_offset = jQuery(document).height() - scroll_top - box_height;
var new_top_offset = jQuery(document).height() - box_height - 100;
if ((scroll_top > top_offset) && (bottom_offset > 180)) {
el.css('top', scroll_top - top_offset);
}
else if ((scroll_top > top_offset) && (bottom_offset < 181)) {
el.css('top', new_top_offset);
}
else {
el.css('top', '');
}
});
});
I do not think that you are using position: fixed; If you tell the element that is positioned with fixed, you are setting it to be positioned fixed relative to the viewport and it will not move from there. Also, It is better to position them like this:
position: fixed;
bottom: 0;
right: 0;
It is better with top, right, bottom and left then with margins. I guess that if you want when scrolling down to change behaviour of fixed positioned element, you should consider using javascript for that.

How can I vertically align this navigation bar?

I have a navigation bar, but i don't know how to vertically align some classes.
I use bootstrap. The navigation bar is fixed position. The navbar is divided into 3 row. The search row is OK, but I can't vertically align the another rows.
Here is the HTML:
<div class="col-sm-10" >
<p>Reményik Tudástár</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4 navbar-search vertical-align">
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-sm-1"></div>
<div class="col-sm-9" style="padding: 0;">
<input type="text" name="search" class="navbar-search-input" placeholder="Keresés">
</div>
<div class="col-sm-1" style="">
<button class="navbar-search-button"><i class="fa fa-search"></i></button>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</div>
<div class="col-sm-4 navbar-login" style="">
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<p style="float: right;">Bejelentkezés</p>
</div>
<div class="col-sm-2">
<span class="fa fa-sign-in fa-2x"></span>
</div>
</div>
</div>
</div>
</div>
and here is the CSS:
.navigation-bar {
background-image: url("../img/nav_background.png");
padding: 15px;
box-shadow: 0px 2px 5px #999999;
}
.navbar-search-input {
width: 100%;
border: 0;
border-radius: 3px 0 0 3px;
height: 35px;
padding: 10px;
}
.navbar-search-button {
background-color: #203138;
color: #fff;
margin-right: 100%;
border: 0;
border-radius: 0 3px 3px 0;
height: 35px;
padding-left: 12px;
padding-right: 12px;
}
So, how can I vertically align the logo and the cim class?
Try this:-
display: inline-block;
*display: inline;
vertical-align: middle;

Sub-heading is displayed inline

Here is my code:
.head {
background-color: #EBEBEB;
height: 40px;
}
h3 {
display: inline;
padding: 8px 0px 0px 10px;
width: 45%;
}
#underFruits {
font-size: 12px;
}
.right {
float: right;
}
.btn {
width: 36px;
height: 36px;
display: inline-block;
cursor: pointer;
border: 1px red solid;
}
<div class="head">
<h3>Fruits</h3>
<span id="underFruits">Put me Under Fruits</span>
<div class="right" style="display: inline-block;">
<div id="Btn1" class="btn" style="display: inline-block;">Btn1</div>
<div id="Btn2" class="btn" style="display: inline-block;">Btn2</div>
</div>
</div>
What I want is,
I want to move text "Put me Under Fruits" actually under H3 heading,
Please note, I can't make any change to class "head" or .btn
<div class="head">
<div style="float:left">
<h3>Fruits</h3>
<div id="underFruits" style="margin-left:10px">Put me Under Fruits</div>
</div>
<div class="right">
<div id="Btn1" class="btn" style="display: inline-block;">Btn1</div>
<div id="Btn2" class="btn" style="display: inline-block;">Btn2</div>
</div>
</div>
You can achieve it like below.
<div class="head">
<div style="display:inline-block;">
<h3>Fruits</h3>
<div id="underFruits">Put me Under Fruits</div>
</div>
<div class="right" style="display: inline-block;">
<div id="Btn1" class="btn" style="display: inline-block;">Btn1</div>
<div id="Btn2" class="btn" style="display: inline-block;">Btn2</div>
</div>
</div>
DEMO

Elements not staying within there container - specifically chrome [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
JSFIDDLE - https://jsfiddle.net/adtdjog2/
Note: I am very inexperienced in programming as you can tell by the simplistic website here.
I am trying to figure out why everything is flowing outside the container div, with the exception of the search function?
BTW I have been using Chrome to view and test all programming. I noticed that it looks different when I put it in the jsfiddle, so not sure what I am doing wrong here in terms of sizing and positioning all elements.
Below is the code
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 logo"><img src="img/logo.PNG"></div>
</div>
<div class="row" style="padding-bottom: 50px;">
<div class="col-md-2 menu">Dashboard</div>
<div class="col-md-2 menu">Invoicing</div>
<div class="col-md-2 menu">Scheduler</div>
<div class="col-md-2 menu">Employees</div>
<div class="col-md-2 menu">User Management</div>
<div class="col-md-2 menu">Customers</div>
</div>
<div class="row" style="padding-bottom: 50px;">
<div class="col-md-2 button">New Employee</div>
<div class="col-md-2 button">Employee Schedule</div>
<div class="col-md-6" style="text-align:right">
<form>
<input type="text" placeholder="Search Employees..." required class="searchbox">
<input type="button" value="Search" class="searchbutton">
</form>
</div>
</div>
<div class="row col-md-12">
<div class="resultbox row">
<div class="table">
<div class="col-md-2 table_cell">Name</div>
<div class="col-md-2 table_cell">Status</div>
<div class="col-md-1 table_cell">Phone</div>
<div class="col-md-4 table_cell">Email</div>
<div class="col-md-3 table_cell">Title</div>
<br><br>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container
{
margin:auto auto;
width:975px;
}
.resultbox
{
width:975px;
height: 500px;
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
/*line-height: 50px;*/
text-align:left;
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight:bold;
}
.logo
{
padding-top: 20px;
padding-bottom: 50px;
padding-left: 0px;
}
.menu
{
width: 162px;
height: 50px;
background: linear-gradient(gray, #eee);
line-height: 50px;
text-align:center;
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight:bold;
padding-left: 0px;
padding-right: 0px;
}
.button
{
width: 150px;
height: 50px;
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
line-height: 50px;
text-align:center;
/*border-radius: 5px;*/
border: 1px solid #000;
color: #666;
font-weight:bold;
padding-left: 0px;
padding-right: 0px;
}
.table
{
display:table;
width:100%;
table-layout:fixed;
}
.table_cell
{
display:table-cell;
width:194px;
border: solid black 0px;
padding-left: 0px;
padding-right: 0px;
}
.searchbox
{
height: 45px;
width: 200px;
}
.searchbutton
{
width: 50px;
height: 45px;
}
Please see image for overflow
You have two primary issues:
1) You're using fixed width elements that don't account for any change in viewport (ie They are not responsive) See Media Queries
2) You're not really using the grid system properly; for instance this > <div class="row col-md-12"> makes no sense. See Grid System
I know this is new to you so learning the fundamental principles of HTML/CSS (at the very least) is essential so you understand how Bootstrap works in general along with digging into the Documentation.
See working example Snippet below of how you could structure your code.
/**For Nav Pills Navigation**/
/*#nav {
margin-bottom: 20px;
}*/
div.logo {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar#nav-menu {
background: linear-gradient(gray, #eee);
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight: bold;
text-align: center;
}
.navbar #menu > li {
background: linear-gradient(gray, #eee);
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight: bold;
text-align: center;
}
#searchForm .btn.btn-navi {
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
border: 1px solid #000;
color: #666;
font-weight: bold;
}
div.resultbox {
margin-top: 20px;
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight: bold;
}
/**For NAVBAR Navigation**/
#media (min-width: 768px) {
.navbar#nav-menu {
margin-bottom: 5px;
}
}
#media (max-width: 768px) {
div.resultbox {
margin-top: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="logo">
<img src="http://placehold.it/1150x300/f00/fff" class="img-responsive" />
</div>
</div>
</div>
</div>
<!--Can be repalced with the below NAV PILLS -->
<div class="container">
<nav class="navbar navbar-default" id="nav-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>Dashboard
</li>
<li>Invoicing
</li>
<li>Scheduler
</li>
<li>Employees
</li>
<li>User Management
</li>
<li>Customers
</li>
</ul>
</div>
</nav>
</div>
<!--Can be used Instead of the above NAVBAR -->
<!--<div class="container">
<div class="row" id="nav">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified" id="menu">
<li role="presentation">Dashboard
</li>
<li role="presentation">Invoicing
</li>
<li role="presentation">Scheduler
</li>
<li role="presentation">Employees
</li>
<li role="presentation">User Management
</li>
<li role="presentation">Customers
</li>
</ul>
</div>
</div>
</div>-->
<div class="container">
<div class="row">
<form id="searchForm">
<div class="form-group">
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-lg btn-block btn-navi">New Employee</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-lg btn-block btn-navi">Employee Schedule</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default btn-lg btn-navi" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
<div class="resultbox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Phone</th>
<th>Email</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>