So in my HTML, I want the choice-div div to grow when you hover on it by 10px. I also don't want the positions of the divs to not change, and not to change its center.
.choice {
width: 100%;
height: 80px;
text-align: left;
}
div.choice-div {
border-radius: 10px;
}
div.choice-div:hover {
width: 105%;
height: 100px;
}
.choice-text {
font-size: 30px;
vertical-align: middle;
}
.icon {
vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>
<div class="problem container">
<h1>What is 1 + 1?</h1>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
</div>
</div>
Any idea how I can do it?
use "scale" css attribute
.choice {
width: 100%;
height: 80px;
text-align: left;
}
div.choice-div {
border-radius: 10px;
}
div.choice-div:hover {
transform: scale(1.1);
}
.choice-text {
font-size: 30px;
vertical-align: middle;
}
.icon {
vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>
<div class="problem container">
<h1>What is 1 + 1?</h1>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
</div>
</div>
Related
I try to clone a website's front end to improve my knowledge.
The problem is Header is not at the top of this website.
Im new to bootstrap but i have to control it.
I did reset the CSS.
It's my first time here, I'm appreciated your help.
body {
margin: 0;
padding: 0;
}
*{
padding: 0;
margin: 0;
}
.img {
width: 221px;
height: 56px;
}
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
<!--sidebar end-->
</div>
<header class="sticky-top">
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
I have moved some code around and managed to get it looking somewhere close, make sure you are pulling in the correct imports in you tag, like
Bootstrap 5 or 4 etc...
(SECOND ATTEMPT)
header {
border-bottom: 3px solid blue;
background-color: #eaeaea;
}
.dropdown-item {
background-color: red!important;
}
.sidebar {
overflow: hidden;
background-color: #eaeaea;
position: sticky;
top: 0;
width: 200px;
border-right: 2px solid blue;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
</div>
<header class="flex flex-col sticky-top">
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<div class="sidebar">
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
</div>
<!--sidebar end-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
I would consider your options as there are a few ways of doing this, this way is preferred by me but not everyone.
Firstly we fixed the element so its stays where it is, next we apply top:0 to make sure the element is at the top of the page and finally passing 'width: 100%' to ensure the navigation fills the width entirely.
I can help more if this answer is not enough.
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
width: 100%;
}
I have 4 columns and I need to make the page responsive so it collapes to fit all four columns in one screen. Right now, the screen on a vertical monitor shows 2 large columns and pushes the other two on the side, see image below.
How do i change my html/css so that all four columns are shown. it is okay if the column can collapse on each other to fit differing resolution code below
I have tried margin-bottom , margin left, margin-rifght and even flexflow: row . but i have no luck with it. I am very new to web development, I was if someone could help me make the page responsive to the different resolutions of the montior. It works now for a 27 horizontal monitor but it doesnt for a 24 veritcal monitor
<!DOCTYPE html>
<html lang="en">
<!--html basic skeleton of the page -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.component.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid header mb-5">
<div class="d-flex flex-row p-2 align-items-center title">
<img src="../assets/logo.png" [width]="50" [height]="50">
<a class="ml-3 title-text" href="/">Test</a>
</div>
<div class="d-flex flex-row banner">
<a class="nav-text mx-3" href="/">Home</a>
<a class="nav-text mx-3" href="/">Contact Us</a>
</div>
</div>
<div class="container-fluid" >
<div class="d-flex flex-row justify-content-around">
<div class="d-flex flex-column">
<h2 class="category"> Test </h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-sort-amount-desc fa-2x mb-3" aria-hidden="true"></i>
Test2
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-filter fa-2x mb-3" aria-hidden="true"></i>
Test3
</div>
</div>
<div class="d-flex flex-column">
<h2 class="category">Analytics</h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-link fa-2x mb-3" aria-hidden="true"></i>
Builder
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-language fa-2x" aria-hidden="true"></i>
Tool
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-fire fa-2x mb-3" aria-hidden="true"></i>
Engagement Map
</div>
</div>
<div class="d-flex flex-column">
<h2 class="category">Other Tools </h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-newspaper-o fa-2x mb-3" aria-hidden="true"></i>
C
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-globe fa-2x mb-3" aria-hidden="true"></i>
G
</div>
</div>
<div class="d-flex flex-column">
<h2 class="category">Documentation</h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-file-text-o fa-2x mb-3" aria-hidden="true"></i>
P
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-file-text-o fa-2x mb-3" aria-hidden="true"></i>
D
</div>
</div>
</div>
</div>
</body>
</html>
css for the page
* {
box-sizing: border-box;
}
body {
font-family: 'EB Garamond', sans-serif;
}
enter code here
i {
color: #0A2240;
}
a {
font-family: 'EB Garamond', sans-serif;
color: #0A2240;
}
a:hover, a:active{
text-decoration: underline;
}
.header {
padding: 0;
}
.title {
background: #0A2240;
font-size: 25px;
}
.banner {
padding: 10px;
text-align: left;
background: #b30000;
color: white;
font-size: 15px;
}
.title-text, .nav-text {
color: white;
font-family: "EB Garamond", sans-serif;
}
h2.category {
color:#0A2240;
text-align: center;
font-size: 25px;
text-align: center;
}
.card {
box-shadow: 0 10px 8px 5px rgba(0, 0, 0, 0.2);
width: 100%;
min-width: 400px;
height: 150px;
padding: 20px;
text-align: center;
background-color: white;
border-style:solid;
border-color:#253746;
border-radius: 25px;
border-width: 2px;
margin-bottom: 60px;
}
what is looks like now
what i hope it look like
When we add the flex-wrap:wrap to the parent element of the boxes it will automatically collapse. So this code might be the solution of your problem :)
.container-fluid .d-flex {
display:flex;
flex-wrap:wrap;
}
I'm making a mini sidebar when users decreases their browser's width. I'm getting stuck when I work with height css property. I allow users to scroll the sidebar.
But I don't know how to increase the sidebar's width automatically when the vertically scrollbar appears.
/* START - bootstrap */
.list-unstyled {
padding-left: 0;
list-style: none;
}
.m-auto {
margin: auto;
}
.text-light {
color: rgb(248, 249, 250);
}
.text-center {
text-align: center;
}
.p-3 {
padding: 1rem!important;
}
/* END - bootstrap */
.sidebar-medium {
overflow-x: hidden;
overflow-y: auto;
display: block;
top: 0;
bottom: 0;
width: 60px;
position: fixed;
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
}
li {
cursor: pointer;
user-select: none;
font-size: 20px;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
.avatar {
width: 30px;
height: 30px;
background-size: 30px 30px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="shadow-sm text-light sidebar-medium">
<ul class="list-unstyled mb-0">
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto avatar" style="background-image: url('https://i.stack.imgur.com/5Jv5C.jpg?s=328&g=1');"></div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-user-tie"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-radiation"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-history"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-envelope"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bell"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bookmark"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-triangle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-circle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-cogs"></i>
</div>
</li>
</ul>
</div>
Screenshot (With and without the scrollbar):
How can I increase the sidebar's width automatically in this case (without javascript)?
One possible solution is to query the height.
#media (max-height: 570px) { /* this is when the scrollbar appears */
.sidebar-medium {
width: 100px;
}
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.m-auto {
margin: auto;
}
.text-light {
color: rgb(248, 249, 250);
}
.text-center {
text-align: center;
}
.p-3 {
padding: 1rem !important;
}
/* END - bootstrap */
.sidebar-medium {
overflow-x: hidden;
overflow-y: auto;
display: block;
top: 0;
bottom: 0;
width: 60px;
position: fixed;
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
transition: width 0.3s;
}
li {
cursor: pointer;
user-select: none;
font-size: 20px;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
.avatar {
width: 30px;
height: 30px;
background-size: 30px 30px;
clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
#media (max-height: 570px) {
.sidebar-medium {
width: 100px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="shadow-sm text-light sidebar-medium">
<ul class="list-unstyled mb-0">
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto avatar" style="
background-image: url('https://i.stack.imgur.com/5Jv5C.jpg?s=328&g=1');
"></div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-user-tie"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-radiation"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-history"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-envelope"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bell"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bookmark"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-triangle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-circle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-cogs"></i>
</div>
</li>
</ul>
</div>
You can always use the ::-webkit-scrollbar in order to have a better visual :
/* START - bootstrap */
.list-unstyled {
padding-left: 0;
list-style: none;
}
.m-auto {
margin: auto;
}
.text-light {
color: rgb(248, 249, 250);
}
.text-center {
text-align: center;
}
.p-3 {
padding: 1rem !important;
}
/* END - bootstrap */
.sidebar-medium {
overflow-x: hidden;
overflow-y: auto;
display: block;
top: 0;
bottom: 0;
width: 60px;
position: fixed;
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
}
li {
cursor: pointer;
user-select: none;
font-size: 20px;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
.avatar {
width: 30px;
height: 30px;
background-size: 30px 30px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
::-webkit-scrollbar {
width: 2px;
}
::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="shadow-sm text-light sidebar-medium">
<ul class="list-unstyled mb-0">
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto avatar" style="background-image: url('https://i.stack.imgur.com/5Jv5C.jpg?s=328&g=1');"></div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-user-tie"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-radiation"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-history"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-envelope"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bell"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bookmark"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-triangle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-circle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-cogs"></i>
</div>
</li>
</ul>
</div>
My objective is to create a "grid" of buttons inside a bootstrap card element. They should be aligned to the right border of the containing card, and should be within it. I would later fill these buttons with images so that I get several image buttons.
I have written the following:
HTML:
<div class="col-sm-20 card-deck mt-3">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div id="buttonpanel" class="container buttonpanel">
<div class="row">
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
<div class="w-100"></div>
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
</div>
</div>
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
Dr Jeslin's Clinic
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: jeslinclinic</h6>
<p class="card-text">Phone: 9</p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text">Homepage</p>
<p class="card-text">External Website: https://mysite</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
</div>
CSS:
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
.buttonpanel {
position: relative;
right: 0;
height: 100%;
top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-top: 0;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
My result looks like this:
codepen
Required result:
You need to grid the page, I just moved the two big <div> inside one row and then I split them to two columns <div class="col-md-6">, you can see my code (open it in a full page):
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Office Registers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- JS files for Jquery/Jquery-ui -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
border: 1px solid white;
height: 80px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
My result
</style>
</head>
<body >
<div class="row mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="col-md-6">
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
Dr Jeslin's Clinic
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: jeslinclinic</h6>
<p class="card-text">Phone: 9</p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text">Homepage</p>
<p class="card-text">External Website: https://mysite</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="w-100"></div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="w-100"></div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am adding an example of flex layout (I believe you need to adjust some changes for better display, this is just an example):
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Office Registers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- JS files for Jquery/Jquery-ui -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
border: 1px solid white;
height: 80px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
</style>
</head>
<body >
<div class="d-flex flex-row mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="p-2 flex-fill">
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
Dr Jeslin's Clinic
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: jeslinclinic</h6>
<p class="card-text">Phone: 9</p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text">Homepage</p>
<p class="card-text">External Website: https://mysite</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
<div class="p-2 flex-fill">
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
</div>
</div>
</body>
</html>
change the grid block and adjust the css.
HTML:
<div class="row">
<div class="box col-sm-2">Buttontext</div>
<div class="box col-sm-4">Buttontext</div>
<div class="box col">Buttontext</div>
</div>
<div class="row">
<div class="box col-sm-2">Buttontext</div>
<div class="box col-sm-4">Buttontext</div>
<div class="box col">Buttontext</div>
</div>
<div class="row">
<div class="box col-sm-2">Buttontext</div>
<div class="box col-sm-4">Buttontext</div>
<div class="box col">Buttontext</div>
</div>
CSS:
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
margin: 2px;
}
.buttonpanel {
position: absolute;
right: 0;
height: 100%;
width: 45%;
top: 0px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
.row {
height: 33%;
}
I am trying to add background color for nav-header, and since it is within col-md-10, it won't take full width when sidebar (col-md-2) is closed.
I tried to wrap it inside another div, but it doesn't work, I can't override col-md-10 rules. Is there any way to do this?
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span>
<i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span>
<i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
<img src="img/logo.png" height="45" alt="">
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
</div>
Perhaps a positioned pseudo-element to imitate a background.
.col-md-10 .nav-header{
position: relative;
}
.col-md-10 .nav-header::after {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
background: red;
width:calc(100vw - 30px);
}
.col-md-10 .nav-header {
position: relative;
}
.col-md-10 .nav-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: red;
width: calc(100vw - 30px);
z-index: -1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span>
<i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span><a href="#" class="list-group-item d-inline-block collapsed"
data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
<i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
Nav header content
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
<img src="img/logo.png" height="45" alt="">
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
That's tricky. Unless you can use the sass functions to build your columns, you'll have to override the styles for that particular .col-md-10. Maybe something like this?
#sidebar:not(.show) + [class*=col-] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
Demo (Note: I'm using jsfiddle because stack snippets is blocking a part of bootstrap's js and failing to execute the part for opening or closing the menu)
Edit
For those curious, the SCSS way to do it would be to use a mixin
Your SCSS might look like this:
#sidebar + main {
#include make-col(12);
}
#sidebar.show + main {
#include make-col(10);
}