I'm having a hard time fixing the issue.
My webpage consists of two divs with 25% and 60% of the width aligned side by side. The right div has cards inside (made it using Bootstrap 5).
Have a look at the following image. I want it like this in every viewport.
I want the entire UI to remain the same when the user resizes the window meaning that the width of the first div remains 25% and the second div remains 60% in all viewports. One more thing, I want to get rid of the Display: flex property when the window resizes so that the cards inside the div remain in a row or something else needs to be done instead of flex property.
My current display: 1920 * 1080.
I've seen many questions related to mine but I'm unable to fix this problem. Can anyone help with this one?
I am new to this platform, I hope I made it clear what my problem is.
#import url("https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: url(/assets/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
height: 100vh;
width: 100%;
color: white !important;
}
#font-face {
font-family: myFont;
src: url(/assets/myFont.ttf);
}
#font-face {
font-family: mainFont;
src: url(/assets/mainFont.otf);
}
/* .main {
} */
.main-row:after {
content: "";
display: table;
clear: both;
}
.logo {
height: 120px;
width: 130px;
position: absolute;
top: 2%;
left: 60%;
}
.border-radius-2 {
border-radius: 2rem !important;
}
.fs-4 {
font-size: 4rem !important;
}
.fs-25 {
font-size: 20px !important;
}
/* MAIN COLS */
.column {
float: left;
height: 100%;
margin-top: 7rem;
}
.column:not(.col-right) {
margin-right: 4rem;
}
/* COLUMN LEFT */
.col-left {
width: 25%;
background: rgb(0, 0, 0);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5242471988795518) 53%, rgba(255, 8, 24, 0.6895133053221288) 100%);
}
.rangliste {
font-family: myFont !important;
font-size: 75px !important;
color: rgba(255, 0, 0, 0.602);
padding: 0.5rem 1rem;
}
.front-text {
position: fixed;
top: 14.5%;
left: 14%;
font-family: mainFont;
}
.col-left-child {
background-color: black;
margin: 30px !important;
}
/* COLUMN RIGHT */
.col-right {
width: 60%;
background: rgb(0, 0, 0);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5242471988795518) 53%, rgba(255, 8, 24, 0.6895133053221288) 100%);
/* z-index: 9999; */
}
.col-right-child-bottom .new-row {
--bs-gutter-x: -10.5rem !important;
}
.row-two:not(.row-one) {
margin-top: 2rem;
}
.card-right-col {
background-color: Black !important;
border: none !important;
border-radius: 2rem !important;
width: 16rem !important;
height: 18rem !important;
}
.card-right-col img {
border-top-left-radius: 2rem !important;
border-top-right-radius: 2rem !important;
filter: grayscale(100%);
}
/* BUTTONS */
.btn-danger {
background-color: rgba(255, 0, 0, 0.274) !important;
border: none !important;
color: red !important;
font-weight: 600 !important;
}
.btn-red {
padding: 0.2rem 2.5rem !important;
border-radius: 1rem !important;
}
.card-btn {
padding: 0 1rem !important;
border-radius: 0.5rem !important;
}
.btn-success {
background-color: rgba(4, 104, 4, 0.493) !important;
border: none !important;
border-radius: 1rem !important;
color: rgba(5, 212, 5, 0.842) !important;
font-weight: 600 !important;
padding: 0.2rem 3rem !important;
}
/* ICONS */
.fa-circle {
color: rgb(5, 212, 5) !important;
}
/* TABLE */
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td,
th {
padding: 8px;
}
td {
width: 25%;
color: rgb(216, 212, 212);
}
td:not(:nth-child(3)) {
border-right: 1px solid rgba(238, 238, 238, 0.185) !important;
}
th:not(:nth-child(3)) {
border-right: 1px solid rgba(238, 238, 238, 0.185) !important;
}
.active-card {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=0.1" />
<title>HEX FFA</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="assets/png" href="assets/logo.png">
<!-- BOOTSTRAP 5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<!-- FONT-AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="main">
<!-- LOGO -->
<img src="assets/logo.png" class="img-fluid logo"></img>
<div class="main-row d-flex justify-content-center">
<!-- LEFT COLUMN -->
<div class="column col-left border-radius-2">
<div class="behind-text m-0">
<h1 class="text-center rangliste m-0">RANGLISTE</h1>
</div>
<div class="front-text p-0 m-0">
<h1 class="text-center rangliste-2 p-0 m-0">Rangliste</h1>
</div>
<!-- CHILD -->
<div class="col-left-child border-radius-2 mt-0">
<div class="container">
<div class="row">
<table>
<tr class="text-center fs-25">
<th>Spieler</th>
<th>Kills</th>
<th>K/D</th>
</tr>
<tr class="text-center fs-25">
<td>Movas</td>
<td>1337</td>
<td>0.5</td>
</tr>
<tr class="text-center fs-25">
<td>Movas</td>
<td>1337</td>
<td>0.5</td>
</tr>
<tr class="text-center fs-25">
<td>Movas</td>
<td>1337</td>
<td>0.5</td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="text-center">
<td></td>
<td></td>
<td></td>
</tr
</table>
</div>
</div>
</div>
</div>
<!-- LEFT COLUMN END -->
<!-- RIGHT COLUMN -->
<div class="column col-right border-radius-2">
<!-- CHILD TOP -->
<div class="container col-right-child-top">
<div class="row">
<div class="col"></div>
<div class="col d-flex justify-content-center">
<div class="card-body text-center">
<h1 class="card-title">HEX FFA</h1>
<h5 class="card-subtitle mb-2 ">Karte auswählen</h5>
</div>
</div>
<div class="col">
<div class="button-red d-flex justify-content-end p-3 ">
<button type="button" class="btn btn-danger btn-red fs-4">
<i class="fas fa-times"></i> Schließen
</button>
</div>
</div>
</div>
</div>
<!-- CHILD BOTTOM -->
<div class="container col-right-child-bottom">
<div class="container">
<div class="row new-row row-one">
<div class="col d-flex justify-content-center">
<div class="card card-right-col border-radius-2" id="card-1">
<img src="https://images.pexels.com/photos/374023/pexels-photo-374023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="card-img-top" alt="..." />
<div class="card-body pb-0">
<div class="container">
<div class="row ">
<div class="col ">
<h6>würfelpark</h6>
</div>
<div class="col d-flex justify-content-end "> <a href="#" class="card-link"><button
type="button" class="btn btn-danger card-btn ">Beliebt</button></a></div>
</div>
</div>
<p class="p-2 "><i class="fas fa-circle"></i> Spieler : 15</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card card-right-col" id="card-2">
<img src="https://images.pexels.com/photos/374023/pexels-photo-374023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="card-img-top" alt="..." />
<div class="card-body pb-0">
<div class="container ">
<div class="row ">
<div class="col ">
<h6>würfelpark</h6>
</div>
<div class="col d-flex justify-content-end "> <a href="#" class="card-link"><button
type="button" class="btn btn-danger card-btn">Beliebt</button></a></div>
</div>
</div>
<p class="p-2"><i class="fas fa-circle"></i> Spieler : 15</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card card-right-col" id="card-3">
<img src="https://images.pexels.com/photos/374023/pexels-photo-374023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="card-img-top" alt="..." />
<div class="card-body pb-0">
<div class="container ">
<div class="row ">
<div class="col ">
<h6>würfelpark</h6>
</div>
<div class="col d-flex justify-content-end "> <a href="#" class="card-link"><button
type="button" class="btn btn-danger card-btn">Beliebt</button></a></div>
</div>
</div>
<p class="p-2"><i class="fas fa-circle"></i> Spieler : 15</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row new-row row-two">
<div class="col d-flex justify-content-center">
<div class="card card-right-col" id="card-4">
<img src="https://images.pexels.com/photos/374023/pexels-photo-374023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="card-img-top" alt="..." />
<div class="card-body pb-0">
<div class="container ">
<div class="row ">
<div class="col ">
<h6>würfelpark</h6>
</div>
<div class="col d-flex justify-content-end "> <a href="#" class="card-link"><button
type="button" class="btn btn-danger card-btn">Beliebt</button></a>
</div>
</div>
</div>
<p class="p-2"><i class="fas fa-circle"></i> Spieler : 15</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card card-right-col" id="card-5">
<img src="https://images.pexels.com/photos/374023/pexels-photo-374023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="card-img-top" alt="..." />
<div class="card-body pb-0">
<div class="container ">
<div class="row ">
<div class="col ">
<h6>würfelpark</h6>
</div>
<div class="col d-flex justify-content-end "> <a href="#" class="card-link"><button
type="button" class="btn btn-danger card-btn">Beliebt</button></a>
</div>
</div>
</div>
<p class="p-2"><i class="fas fa-circle"></i> Spieler : 15</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card card-right-col" id="card-6">
<img src="https://images.pexels.com/photos/374023/pexels-photo-374023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="card-img-top" alt="..." />
<div class="card-body pb-0">
<div class="container ">
<div class="row ">
<div class="col ">
<h6>würfelpark</h6>
</div>
<div class="col d-flex justify-content-end ">
<a href="#" class="card-link"><button
type="button" class="btn btn-danger card-btn">Beliebt</button></a>
</div>
</div>
</div>
<p class="p-2"><i class="fas fa-circle"></i> Spieler : 15</p>
</div>
</div>
</div>
</div>
</div>
<div class="button-green d-flex justify-content-center p-3">
<button type="button" class="btn btn-success fs-4"> <i class="fas fa-file-export"></i> Beitreten</button>
</div>
</div>
</div>
<!-- RIGHT COLUMN END -->
</div>
</div>
<!-- BOOTSTRAP JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
I'm facing this on window resize:
Related
Below is a complete HTML reproducible example. When using the selectpicker class from bootstrap-select, the live search box flows off to the left in the sidebar when clicking in the box and is not visible in the UI. This did not occur using earlier versions of bootstrap, but I am now migrating to newer versions. I am not able to see the root cause, does anyone else have a suggested fix?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<style>
.sidebar {
top: 50px;
left: 0px;
position: sticky;
}
</style>
<style>
body, html {
height:100%;
overflow: hidden;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
overflow: auto;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left vh-100">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item</a></li>
<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
</ul>
</div>
<!--/col-->
<main class="col main pt-5 mt-3 h-100 overflow-auto">
<h1 class="display-4 d-none d-sm-block">
Bootstrap Dashboard
</h1>
<p class="lead d-none d-sm-block">Plus scrolling sidebar, based on Bootstrap 4</p>
<div class="alert alert-warning fade collapse" role="alert" id="myAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> It's free.. this is an example theme.
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 py-2">
<div class="card bg-success text-white h-100">
<div class="card-body bg-success">
<div class="rotate">
<i class="fa fa-user fa-4x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-4">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-danger h-100">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-4">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-info h-100">
<div class="card-body bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-4x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-4">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-warning h-100">
<div class="card-body">
<div class="rotate">
<i class="fa fa-share fa-4x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-4">36</h1>
</div>
</div>
</div>
</div>
<!--/row-->
<hr>
<a id="features"></a>
<hr>
<p class="lead mt-5">
Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting
new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font
sizes.
</p>
<div class="row my-4">
<div class="col-lg-3 col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/740x180/bbb/fff?text=..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Layouts</h4>
<p class="card-text">Flexbox provides simpler, more flexible layout options like vertical centering.</p>
Button
</div>
</div>
<div class="card card-inverse bg-inverse mt-3">
<div class="card-body">
<h3 class="card-title">Flexbox</h3>
<p class="card-text">Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.</p>
Outline
</div>
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Label</th>
<th>Header</th>
<th>Column</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>responsive</td>
<td>bootstrap</td>
<td>cards</td>
<td>grid</td>
</tr>
<tr>
<td>1,002</td>
<td>rwd</td>
<td>web designers</td>
<td>theme</td>
<td>responsive</td>
</tr>
<tr>
<td>1,003</td>
<td>free</td>
<td>open-source</td>
<td>download</td>
<td>template</td>
</tr>
<tr>
<td>1,003</td>
<td>frontend</td>
<td>developer</td>
<td>coding</td>
<td>card panel</td>
</tr>
<tr>
<td>1,004</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>mobile-first</td>
<td>design</td>
</tr>
<tr>
<td>1,005</td>
<td>navbar</td>
<td>sticky</td>
<td>jumbtron</td>
<td>header</td>
</tr>
<tr>
<td>1,006</td>
<td>collapse</td>
<td>affix</td>
<td>submenu</td>
<td>flexbox</td>
</tr>
<tr>
<td>1,007</td>
<td>layout</td>
<td>examples</td>
<td>themes</td>
<td>grid</td>
</tr>
<tr>
<td>1,008</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>flexbox</td>
<td>design</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--/row-->
</main>
<!--/main col-->
</div>
</div>
<!--/.container-->
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
After resizing the screensize the nav-link buttons don't use the css i gave them anymore. I tried the #media function but it doesn't react on changes in the css after resizing the screen.
(tables are empty, they get filled by the JS code.)
Why is itn't it responding or using the css after resizing the screen?
before resizing (large screen)
after resizing (smaller screen)
In the picture below you can see that there is some interfering with the code but i don't use the #media function at all but it's still using it.
what the browser is seeing
.annuHypoTabellen .nav-link:hover {
background-color: #ff486dad;
color: #fff;
}
.annuHypoTabellen .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #de002e;
font-weight: 700;
color: #fff;
}
.annuHypoTabellen .nav-link {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: rgba(201, 201, 201, 0.425);
border: 0;
border-radius: 0;
color: #616161;
transition: background-color 0.2s ease;
}
<div class="annuHypoTabellen mt-3">
<div class="row">
<div class="col-md-8 col-xl-9 col-12">
<h4 class="text-gtdirect mt-3 mb-3">
Overzicht totale lasten bij <ins>niet</ins> oversluiten
</h4>
</div>
<div class="col-md-4 col-xl-3 col-12 ml-auto d-flex justify-content-end ">
<ul class="nav nav-pills mb-3 navHypoTabsSmall" id="huidigeHypoTab" role="tablist">
<li class="nav-item">
<a class="nav-link nav-link-annuHypo active" id="pills-jaarHuidigeHypo-tab" data-toggle="pill" href="#pills-jaarHuidigeHypo" role="tab" aria-controls="pills-jaarHuidigeHypo" aria-selected="true">Per Jaar</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-annuHypo" id="pills-maandHuidigeHypo-tab" data-toggle="pill" href="#pills-maandHuidigeHypo" role="tab" aria-controls="pills-maandHuidigeHypo" aria-selected="false">Per Maand</a>
</li>
</ul>
</div>
</div>
<div class="swipeIcons mb-2">
<div class="row">
<div class="col">
<i class="fas fa-arrow-left fa-lg float-left text-gtdirect pt-1"></i>
</div>
<div class="col">
<h5 class="text-center lead">Scroll</h5>
</div>
<div class="col">
<i class="fas fa-arrow-right fa-lg float-right text-gtdirect pt-1"></i>
</div>
</div>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-jaarHuidigeHypo" role="tabpanel" aria-labelledby="pills-jaarHuidigeHypo-tab">
<div class="anhypoResult">
<div class="scrollBox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Jaar</th>
<th scope="col">Totale jaar rente</th>
<th scope="col">Totale jaar aflossing</th>
<th scope="col">Schuld ultimo</th>
<th scope="col">Eigen-woning-forfait</th>
<th scope="col">IB-EWF</th>
<th scope="col">IB rente aftrek</th>
<th scope="col">Netto lasten</th>
</tr>
</thead>
<tbody class="annuHuidigeHypoResultTabelJaar">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-maandHuidigeHypo" role="tabpanel" aria-labelledby="pills-maandHuidigeHypo-tab">
<div class="anhypoResult">
<div class="scrollBox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Jaar</th>
<th scope="col">Maand</th>
<th scope="col">Rente</th>
<th scope="col">Aflossing</th>
<th scope="col">Schuld ultimo</th>
<th scope="col">Eigen-woning-forfait</th>
<th scope="col">IB-EWF</th>
<th scope="col">IB rente aftrek</th>
<th scope="col">Netto lasten</th>
</tr>
</thead>
<tbody class="annuHuidigeHypoResultTabel">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I have html code which is used to display two tables. When I run the program the two tables appear one below the other, but I want the two tables to be on the extreme left.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50px;
margin-left: auto;
margin-right: auto;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="jiratable" style="display: none;">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
The output is:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
Expected Output is:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
Here for sample I am writing only one table output, but in actuality there are two tables each, one below the other.
Just remove the margin-left and margin-right. You can also remove the width because tables always automatically are as wide as their content and there's nothing you can do about it.
body {
background-color: #E6E6FA;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="jiratable">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
Use float property. In this case, you want to float your element to the left.
<!DOCTYPE html>
<html>
<head>
<style>
table{
font-family:arial,sans-serif;
border-collapse: collapse;
width:50px;
margin-left: auto;
margin-right: auto;
float:left;
}
td,
th{
border:1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center" >
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading" >Reportees List</div>
<table id = "employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id ="jiratable" style="display: none;">
<div class="container text-center" >
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id = "Jira_table" class="table table-hover"
cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id ="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id ="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id ="sendMail" class="btn btn-primary btn-lg pull-right"
onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
I am having some trouble with some of my bootstrap cards overlapping my navbar. I made sure that none of my positions were absolute and that the z indexes were handled properly, but I still get the same issue. doing padding-top on the body did not give me the result I wanted either. Here are some before and after pictures.
#top {
top: 0;
position: fixed;
z-index: 1;
}
.topbar {
height: 90px;
background-color: #24414e;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
}
#keyframes greeting {
0% {
background: url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60% {
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo {
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder {
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out {
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover {
text-decoration: underline;
}
.menu {
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon {
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt {
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide {
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1:hover~.txt-1 {
visibility: visible;
}
.icon-2:hover~.txt-2 {
visibility: visible;
}
.icon-3:hover~.txt-3 {
visibility: visible;
}
.icon-4:hover~.txt-4 {
visibility: visible;
}
.icon-5:hover~.txt-5 {
visibility: visible;
}
.icon-6:hover~.txt-6 {
visibility: visible;
}
.icon:hover {
color: #ffffff;
}
.rest {
height: 100%;
}
.contacts {
position: relative;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="templatestyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id="top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id="openMenu">
<div class="row">
<div class="col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class="txt txt-1">Dashboard</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class="txt txt-2">Profile</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class="txt txt-3">Certificates</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class="txt txt-4">Send/Apply</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class="txt txt-5">Settings</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class="txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class="rest container-fluid">
<h2 class="text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class="row contacts">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 1</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 2</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 3</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 4</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 5</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 6</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 7</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
This is a simple fix, just set your Header z-index: 2; and your cards z-index: 1;.
I didn't really go over your code but setting the header an higher z-index as the content for sure will fix it.
The answer is you have given position:fixed to the header(.top) to fix it at the top with top:0, so you must need to give margin-top to the section next to it containing classes class="rest container-fluid" otherwise it will overlap as it seems with absolute positioned element.
Setting margin:top:159px fix the issue.
Please note that 159px is top header's height here. Happy coding :)
Use the fixed-top class instead of the top CSS code. And add 160px padding-top for the body.
/*
The headers height is 159.5px
*/
body {
padding-top: 160px;
}
fixed-top removes the element that you use it for, from the normal flow of the content, and, hence, the element will overlay the other content
To fix the issue, you need to push down the main content equal or larger than the height of the fixed-top element. You can do so by setting the padding-top of the body equal or larger than the fixed-top element's height. For example, if the fixed-top element's height is 72px, padding-top of body should be, at least, 72px. If you wish, you can use relative units: padding-top: 4.5rem; instead of padding-top: 72px;.
body {
padding-top: 72px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="fixed-top bg-light">
<div>
<noscript>
<h1 style="color:#FF0000;">
This reportFile will not be navigable without Javascript, please enabled Javascript
</h1>
</noscript>
<img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px" class="mb-2">
</div>
<header>
<h2 class="subheading" title="Start Fixing Songs">
<a class="mx-2">
Fix Songs
</a>
</h2>
</header>
</div>
<main class="container-fluid bg-primary bd-">
<div class="row">
<div class="col py-5">Hello</div>
</div>
</main>
This is what both bootstrap-3 and bootstrap-4 has done. I recommend you to inspect it yourself.
You may find these two link useful.
w3schools - How to - fixed menu
teamtreehouse - div hiddne below fixed position navbar
A codepen of your work
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>