JS Fiddle Link
https://jsfiddle.net/9dumrg8v/1/
Here is the look of my current header
I have a few goals that I want working:
1. Keep the collapsible bar and image on the same line
I would like to have it "locked" on a line when it gets adjusted to a smaller window:
The image and collapsible bar is separated since I don't include the image in the dropdown
<a class="navbar-brand" href="main">
<img src="img/logo_header.png" class="img-responsive img-header" width="200">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
2. Include the links in the bottom in the collapsible navbar
Have the list (one-six) be with the navbar when it appears, currently they are separated.
Also, If I try to add it inside the <div class="collapse navbar-collapse" id="navbarSupportedContent">, it gets included in the same row and destroys the design.
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mwc-orange-nav">
<div class="container">
<div class="row px-4">
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
One</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Two</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Three</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Four</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Five</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Six</a>
</div>
</div>
</div>
</div>
Any help would be appreciated, thank you.
Please try this code. We have altered the structure somewhat.
.navbar.navbar-expand-md.navbar-light { padding: 0; flex-direction: column; -webkit-flex-direction: column; }
.menu-top .login-btn { padding: 0 10px;}
.navbar-expand-md > .container > div { width: 100%; }
.menu-top { display: flex; display:-webkit-flex; align-items: center; -webkit-align-items: center;}
.navbar-expand-md .navbar-collapse { width:100%;}
.menu-box {
padding: 0px 45px;
}
.menu-box a {
color: white !important;
}
.menu-box:hover {
background-color: white;
}
.menu-box:hover a {
color: #f08400 !important;
text-decoration: none;
}
.mwc-orange-nav {
background-color: rgb(240,132,0, 0.8);
}
.bg-blue{
background: #00a6a6 !important;
border-color: #00a6a6 !important;
}
.curve-right {
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.fa-search {
color:
#fff !important;
}
.header-font {
font-size: 18px;
color: #00a6a6;
}
.header-font:hover {
text-decoration: none;
color: #007070;
}
.header-box {
box-sizing: content-box;
padding: 5px 25px;
border-radius: 10px;
border: 2px solid #00a6a6;
color: #00a6a6;
}
.header-box:hover {
text-decoration: none;
color: white;
background-color: #00a6a6;
}
#media(max-width:767px){
.menu-top { padding: 0 10px; display: block; }
.menu-box { flex-basis: auto; -webkit-flex-basis: auto; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="nav-header"> <!-- start header -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container pt-3">
<div class="menu-top">
<a class="navbar-brand" href="main">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="img-fluid" width="200">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form action="cards/search.php" method="POST" class="d-inline w-50 mx-auto">
<div class="input-group">
<input type="text" name="text-search" id="searchBox" class="form-control search-bar" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Search" required>
<div class="input-group-prepend">
<button type="submit" name="submit-search" class="input-group-text bg-blue curve-right"> <i class="fas fa-search"></i> </button>
</div>
</div>
<div id="response" class="scrollbar-design search-content"></div>
</form>
<div class="row login-btn">
<div class="col-md-6 mb-2 mt-2">
Login
</div>
<div class="col-md-6 mb-2 mt-2">
Register
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse mwc-orange-nav" id="navbarSupportedContent">
<div class="container">
<ul class="navbar-nav row px-4">
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2 active">
<a href="cards/list-new.php" class=" nav-link menu-header">
One</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list.php?tn=beauty" class="nav-link menu-header">
Two</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list.php?tn=health" class="nav-link menu-header">
Three</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list.php?tn=wellness" class="nav-link menu-header">
Four</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list-partners.php" class="nav-link menu-header">
Five</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="articles" class="nav-link menu-header">
Six</a>
</li>
</ul>
</div>
</div>
</nav>
</div><!-- end header-->
Related
I have 2 nav pill buttons that are supposed to change the layout when clicked. Both layouts include the sidebar which doesn't change.
Nav pill 1 changes the layout to:
sidebar | column 1 | column 2
Nav pill 2 changes the layout to:
sidebar | col 1 | column 2 | col 3
Right now what happens is that one column will show up next to the sidebar but the others will be under it and i'm not sure why this happens
#sidebar {
/* width: 250px; */
min-height: 100vh;
max-height: 100vh;
}
#sidebar_sub_header a {
border-radius: 0;
}
#sidebar_main_content::-webkit-scrollbar {
width: 0;
height: 0;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
overflow-x: hidden;
}
#sidebar_main_content img {
/* border: 1px solid white; */
border: 1px solid rgba(255, 255, 255, 0.1);
height:100px;
width:100px;
}
#sidebar_footer {
align-items: center;
text-align: center;
}
#main_body_channels {
height: 100vh;
}
#main_body_token_requirement_confirmation {
height: 100vh;
}
#main_body_roles {
height: 100vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container-fluid px-0">
<div class="row gx-0">
<nav class="col p-0 d-flex flex-column gap-1 bg-dark text-white" id="sidebar">
<!-- sidebar header -->
<div class="bg-dark text-white p-3" style="text-align: center; align-items: center;">
<h4>
sidebar header
</h4>
<div class="dropup-center dropdown p-1">
<a href="#" class="align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
username
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">Delete User Info</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
<hr>
<!-- sidebar sub header -->
<div class="bg-dark text-white text-center" id="sidebar_sub_header">
<ul class="nav nav-pills flex-column mb-auto text-white" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a href="#" class="nav-link text-white active" id="server_wide_button" data-bs-toggle="tab" data-bs-target="#server_wide_requirements_pane" type="button" role="tab" aria-controls="server_wide_requirements_pane" aria-selected="true">
button 1
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link text-white" id="channel_specific_button" data-bs-toggle="tab" data-bs-target="#channel_specific_requirements_pane" type="button" role="tab" aria-controls="channel_specific_requirements_pane" aria-selected="false">
button 2
</a>
</li>
</ul>
</div>
<br>
<!-- sidebar main content -->
<div class="flex-grow-1 overflow-auto bg-dark text-white" style="align-items: center;" id="sidebar_main_content">
<ul class="nav flex-column mb-auto align-items-center">
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
</a>
</li>
<br>
</ul>
</div>
<!-- sidebar footer -->
<div class="p-3 bg-dark text-white" id="sidebar_footer">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="test tooltip?">
test button
</a>
</div>
</nav>
<!-- TAB 1 -->
<div class="col tab-pane fade show active" id="server_wide_requirements_pane" role="tabpanel" aria-labelledby="server_wide_button" tabindex="0">
<div class="text-dark bg-danger" id="main_body_token_requirement_confirmation">
big main body column
</div>
<div class="p-0 d-flex flex-column gap-1 bg-secondary text-dark" id="main_body_roles">
right sidebar column
</div>
</div>
<!-- TAB 2 -->
<div class="col tab-pane fade" id="channel_specific_requirements_pane" role="tabpanel" aria-labelledby="channel_specific_button" tabindex="0">
<div class="p-0 bg-primary text-dark" id="main_body_channels">
column next to sidebar - same size?
</div>
<div class="bg-danger text-dark" id="main_body_token_requirement_confirmation">
big middle main body column
</div>
<div class="p-0 bg-secondary text-dark" id="main_body_roles">
right sidebar
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
using bootstrap 5.3.0 alpha-1
For Bootstrap tabs to work every tab-pane needs to be wrapped in a tab-content container.
For your columns; add the class container-fluid to each tab-pane, then add a row that contains your columns. In my basic example all columns are equal in width, but its easily adjustable.
I am assuming you want a full-page layout, so in CSS do:
#sidebar,
main {
height: 100vh;
max-height: 100vh;
}
Then give each container-fluid in <main> the class h-100, which is equal to height: 100%.
Next, give each row the class h-100. Add flex class align-items-stretch to make each column stretch the full available height.
Note: This snippet is build upon my answer of your previous question, not upon the code in your question.
#sidebar,
main {
height: 100vh;
max-height: 100vh;
}
.tab-pane .row .col {
background: tomato;
}
.tab-pane .row .col:nth-child(2) {
background: lightyellow;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0">
<div class="col-4 d-flex flex-column gap-1 bg-dark text-white" id="sidebar">
<div class="p-2">
<h5>
Sidebar header
</h5>
</div>
<nav class="">
<ul class="nav nav-pills flex-column text-center" role="tablist" aria-orientation="vertical">
<li class="nav-link rounded-0 active" data-bs-toggle="tab" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-1" aria-selected="true">Tab #1 - 2 Columns</li>
<li class="nav-link rounded-0" data-bs-toggle="tab" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-2" aria-selected="false">Tab #2 - 3 Columns</li>
</ul>
</nav>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</div>
<main class="col tab-content overflow-auto">
<div class="container-fluid h-100 tab-pane fade active show" id="tab-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
<div class="row h-100 align-items-stretch">
<div class="col">
Col 1
</div>
<div class="col">
Col 2
</div>
</div>
</div>
<div class="container-fluid h-100 tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
<div class="row h-100 align-items-stretch">
<div class="col">
Col 1
</div>
<div class="col">
Col 2
</div>
<div class="col">
Col 3
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
I am only learning so take my HTML and CSS lightly :)
I am struggling with my top nav bar. It keeps getting overtaken by my styling card. It sits on top and forces my top navbar underneath. I am trying to make the top fixed as the left nav bar is fixed so on scroll the left goes but top doesn't and when I fix top the products styling cards sit above my nav bar.
html {
scroll-behavior: smooth;
}
body {
background-color: #EFEFEF;
}
#top-nav {
background-color: #1B2430;
padding-top: 10px;
padding-bottom: 10px;
}
#sidebarMenu {
position: fixed !important;
}
/* Logo */
.navbar-brand {
color: #007bff !important;
font-size: 20px;
padding-left: 10px;
padding-right: 150px;
}
/* NavBar Text Links */
.nav-link {
color: white !important;
}
.nav-link:hover {
color: white !important;
}
/* Navbar Text */
.navbar-nav {
padding-left: 30px;
}
/* Search Button */
.btn-1 {
color: #007bff;
border-color: white;
}
/* Checkout Cart */
.cart {
color: white;
padding-top: 7px;
padding-left: 160px;
}
/* Sidebar */
.sidebar {
background-color: #1B2430 !important;
position: fixed;
top: 55px;
bottom: 0;
left: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 240px;
z-index: 600;
padding-top: 10px;
}
.text-color {
color: white;
}
.list-group-item {
background-color: #1B2430;
}
.list-group-item.active {
background-color: #1B2430;
}
/* Sign out */
.sign-out {
padding-top: 200px !important;
padding-left: 10px;
color: white;
}
.sign-out:hover {
color: white;
}
.power-btn {
color: red;
}
/* Product Style Cards */
#style-card {
align-items: center;
padding-left: 240px;
}
.container-fluid {
padding-top: 20px;
}
.img-fluid {
height: 200px;
padding-top: 15px;
}
.btn-secondary {
background-color: #007bff;
}
hr {
background-color: #007bff;
}
<!-- Fontawsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-1">
<div id="top-nav">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">EmailedXboxLive LTD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="What you looking for?" aria-label="Search">
<button type="button" class="btn btn-secondary btn-rounded">Search</button>
</form>
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Play Station</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Xbox Live</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">iTunes</a>
</li>
<!-- Cart Icon -->
<div class="cart">
<a class="cart" href="#"><i class="fa fa-shopping-cart" style="font-size:24px"></i></a>
</div>
</ul>
</div>
</nav>
</div>
</div>
<!-- Side Navbar -->
<div class="container-2">
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a href="#" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span>(ACCOUNT NAME)</span>
</a>
<a href="#" class="list-group-item list-group-item-action py-2 ripple active">
<i class="text-color fas fa-chart-area fa-fw me-3"></i><span>Main Dashboard</span>
</a>
<i class="fas fa-chart-line fa-fw me-3"></i><span>My Orders</span>
<i class="fas fa-chart-line fa-fw me-3"></i><span>My Wallet</span>
<a href="#" class="text-color list-group-item list-group-item-action py-2 ripple">
<i class="text-color fa-chart-pie fa-fw me-3"></i><span>Billing</span>
</a>
<i class="fas fa-chart-bar fa-fw me-3"></i><span>Notifications</span>
<i class="fas fa-chart-line fa-fw me-3"></i><span>Account Settings</span>
<!-- Sign Out -->
<div class="sign-out">
</i> Sign Out</span>
</div>
</div>
</div>
</div>
<!-- Product Style Cards -->
<div class="container-fluid">
<div id="style-card">
<div class="row">
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £10 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £15 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £20 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £25 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £25 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
In order to fix the top nav bar, it seems that you just need to add Bootstrap's sticky-top class to the container of it:
<div class="container-1 sticky-top">
Unlike fixed, element with a sticky position is placed as in normal flow of the document and keeps a predefined position when being scrolled away.
More about navbar placement in Bootstrap docs
Hope this will help.
Expand the below example in full page to see result:
html {
scroll-behavior: smooth;
}
body {
background-color: #EFEFEF;
}
#top-nav {
background-color: #1B2430;
padding-top: 10px;
padding-bottom: 10px;
}
#sidebarMenu {
position: fixed !important;
}
/* Logo */
.navbar-brand {
color: #007bff !important;
font-size: 20px;
padding-left: 10px;
padding-right: 150px;
}
/* NavBar Text Links */
.nav-link {
color: white !important;
}
.nav-link:hover {
color: white !important;
}
/* Navbar Text */
.navbar-nav {
padding-left: 30px;
}
/* Search Button */
.btn-1 {
color: #007bff;
border-color: white;
}
/* Checkout Cart */
.cart {
color: white;
padding-top: 7px;
padding-left: 160px;
}
/* Sidebar */
.sidebar {
background-color: #1B2430 !important;
position: fixed;
top: 55px;
bottom: 0;
left: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 240px;
z-index: 600;
padding-top: 10px;
}
.text-color {
color: white;
}
.list-group-item {
background-color: #1B2430;
}
.list-group-item.active {
background-color: #1B2430;
}
/* Sign out */
.sign-out {
padding-top: 200px !important;
padding-left: 10px;
color: white;
}
.sign-out:hover {
color: white;
}
.power-btn {
color: red;
}
/* Product Style Cards */
#style-card {
align-items: center;
padding-left: 240px;
}
.container-fluid {
padding-top: 20px;
}
.img-fluid {
height: 200px;
padding-top: 15px;
}
.btn-secondary {
background-color: #007bff;
}
hr {
background-color: #007bff;
}
<!-- Fontawsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 👇 Add the sticky-top class here -->
<div class="container-1 sticky-top">
<div id="top-nav">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">EmailedXboxLive LTD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="What you looking for?" aria-label="Search">
<button type="button" class="btn btn-secondary btn-rounded">Search</button>
</form>
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Play Station</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Xbox Live</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">iTunes</a>
</li>
<!-- Cart Icon -->
<div class="cart">
<a class="cart" href="#"><i class="fa fa-shopping-cart" style="font-size:24px"></i></a>
</div>
</ul>
</div>
</nav>
</div>
</div>
<!-- Side Navbar -->
<div class="container-2">
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a href="#" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span>(ACCOUNT NAME)</span>
</a>
<a href="#" class="list-group-item list-group-item-action py-2 ripple active">
<i class="text-color fas fa-chart-area fa-fw me-3"></i><span>Main Dashboard</span>
</a>
<i class="fas fa-chart-line fa-fw me-3"></i><span>My Orders</span>
<i class="fas fa-chart-line fa-fw me-3"></i><span>My Wallet</span>
<a href="#" class="text-color list-group-item list-group-item-action py-2 ripple">
<i class="text-color fa-chart-pie fa-fw me-3"></i><span>Billing</span>
</a>
<i class="fas fa-chart-bar fa-fw me-3"></i><span>Notifications</span>
<i class="fas fa-chart-line fa-fw me-3"></i><span>Account Settings</span>
<!-- Sign Out -->
<div class="sign-out">
</i> Sign Out</span>
</div>
</div>
</div>
</div>
<!-- Product Style Cards -->
<div class="container-fluid">
<div id="style-card">
<div class="row">
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £10 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £15 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £20 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £25 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center ">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Play Station £25 UK</h5>
<hr>
<p>Qty:</p>
<button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
.container-fluid-1 {
padding: 0;
}
.navbar {
padding: 0 5%;
}
.navbar-section{
background-color: #fff;
width: 100%;
padding: 0 1%;
margin: 0;
position: fixed;
z-index: 1;
}
.nav-item {
padding: 0 20px;
}
.nav-link {
color: black;
}
.nav-link:focus {
color: black;
}
.nav-link:hover {
color: #feb633;
}
.navbar-brand {
font-size: 3.5rem;
font-family: 'Hind Siliguri', sans-serif;
color: #feb633;
}
.navbar-brand:hover {
color: grey;
}
/* title */
.introduction {
background-color: #fbfbfb;
padding-top: 10%;
}
.subtitle {
font-size: 1.5rem;
color: grey;
}
.twotitle {
padding-top: 220px;
padding-left: 200px;
}
.btn {
background: #feb633;
color: #fff;
}
.btn:hover {
border: 2px solid #feb633;
transition: 0.2s ease-in all;
color: #feb633;
background-color: #fbfbfb;
}
I put a container-fluid class in my whole body but it doesn't provides a full width container except for navbar.
Everything looks fine on PC (1440px) but on mobile the whole body (except for navbar)moving to left side.
Here is the screenshot on laptop that's what I want.
Here is the screenshot on iPhoneX The grey background is on the left now.
Could someone please help me with it? Thanks in advance.
*container-fluid-1 is a class for CSS.
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<div class="twotitle col-lg-6">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<!--use mobile responsive classes here for full width use col-xs-12 col-sm-12 col-md-12 -->
<div class="twotitle col-lg-6 col-md-12 col-sm-12 col-xs-12">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6 col-md-12 col-sm-12 col-xs-12">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->
I have page where there is four components.
Top Navigation
Sidebar
Footer
Main content
I want Top Navigation fixed at top and footer to be fixed at bottom. But sidebar needs to be sticked to left with the full height.
To achieve all these stuff I have created this plunker. When we run it in full screen it makes the sidebar collapse to actual height.
Here is a code
/* Styles go here */
body, html {
height:100%;
}
/*
* 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%;
}
}
/*
* 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);
}
HTML
<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">
<div class="col-md-3 col-lg-2 sidebar-offcanvas 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="#submenu1" data-toggle="collapse" data-target="#submenu1">Reports▾</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Report 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Report 2</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#">Export</a></li>
<li class="nav-item"><a class="nav-link" href="#">Snippets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Flexbox</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>
</ul>
</div>
<!--/col-->
<div class="col main pt-5 mt-3">
<h1 class="display-4 d-none d-sm-block">
Bootstrap 4 Dashboard
</h1>
</div>
</div>
</div>
<!--/.container-->
<footer class="container-fluid">
<p class="text-right small">©2016-2018 Company</p>
</footer>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<p>This is a dashboard layout for Bootstrap 4. This is an example of the Modal component which you can use to show content. Any content can be placed inside the modal and it can use the Bootstrap grid classes.</p>
<p>
Grab the code at Codeply
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary-outline" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
With the help of Bootstrap 4 you can do the following changes on your code:
Add h-100 class to your #main container and to the .row-offcanvas right next to it.
Add fixed-bottom class to your <footer>.
Your code will look like these:
<div class="container-fluid h-100" id="main">
<div class="row row-offcanvas row-offcanvas-left h-100">
<!-- your subsequent codes -->
</div>
</div>
<!--/.container-->
<footer class="container-fluid fixed-bottom">
<!-- your footer's paragraph code -->
</footer>
You can check it on Plunker.
I think you should review the structure of your code. I hope that it helps.
Add h-100 class on both the below divs
<div class="container-fluid h-100" id="main">
<div class="row row-offcanvas row-offcanvas-left h-100">
See the updated plunker
For the footer this might help :
footer{
position: absolute;
bottom:0;
transform: translateX(-40%);
}
https://plnkr.co/edit/gKmLbFcF1IxVS7QyYyaL?p=preview - if you want this solution:
.container-fluid, .row {
height: 100%;
}
I made a webpage with a "sticky" footer(the footer is at the bottom of content if the content is large, or at the bottom of the viewport if the content is small) by using flexbox. I am now trying to make it so the content will be at the center of the remaining height(vh - height of navbar - height of footer) if the content is small enough. Below is an image to demostrate what I just said.
Here is my code.
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container d-flex align-items-center justify-content-center h-100" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
#div-1 {
background-color: #00ff00;
}
.full-height {
height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
The height of the content won't change, I'm just trying to support multiple screen sizes. I have encountered 2 problems by using this approach. First, it does not work on landscape mode on mobile(emulated using chrome dev tools). Second, the navbar shrinks in height.
jsfiddle is available here. You can also compare it with the original version. Adding /embedded/result/ to the end of the url will open the result in fullscreen. Thanks for helping!
If you change the following it will work as you asked for:
change to min-height: 100vh in the .full-height rule
remove align-items-center/h-100 and add m-auto in the id="div-1" elements class list
Do note, the <br> you had after the </nav> in the markup is invalid, so i removed it. If you want a gap there, use margin's padding's
Updated fiddle
Stack snippet
#div-1 {
background-color: #00ff00;
}
.full-height {
min-height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container d-flex justify-content-center m-auto" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>