I have these two containers, one in the navbar and the other for the rest of the page and as soon i resize until the sm-view point, the two containers aren't aligned on the same vertical lign. How do i correct it?
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-custom sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><i class='far fa-image' style='font-size:24px'></i> IMGS</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" >
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-3">
<div class="jumbotron py-4 mb-3">
<h1><i class='fas fa-camera-retro' style='font-size:40px'></i> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take(except the first one!)</p>
</div>
<div class="row ">
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1481889617387-82a8f2413b6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551356279-8337da8863d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551897628-d053c089e823?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1555939765-9b78f509d500?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1516911588919-bf6b970eaf32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551222998-8a604fda1d22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1550977088-b31835bf616d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551290465-0ac783e20542?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
</div>
</div>
</body>
</html>
One quick way would be to add px-0 px-sm-3 classes to container element.
Issue is that between the widths 768px & 576px, the following default Bootstrap 4 class .navbar-expand-md>.container overrides the padding-left:15px and padding-right:15px of the container class;
#media (max-width: 767.98px)
{.navbar-expand-md>.container, .navbar-expand-md>.container-fluid {
padding-right: 0;
padding-left: 0;
}
}
to fix, just do
#media screen and (min-width:576px) and (max-width:768px){
.navbar>.container{ padding-right: 15px !important;padding-left: 15px !important;}
}
working code sample here:
#media screen and (min-width:576px) and (max-width:768px) {
.navbar>.container {
padding-right: 15px !important;
padding-left: 15px !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark bg-custom sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class='far fa-image' style='font-size:24px'></i> IMGS</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-3">
<div class="jumbotron py-4 mb-3">
<h1>
<i class='fas fa-camera-retro' style='font-size:40px'></i> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take(except the first one!)</p>
</div>
<div class="row ">
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1481889617387-82a8f2413b6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1551356279-8337da8863d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1551897628-d053c089e823?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1555939765-9b78f509d500?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1516911588919-bf6b970eaf32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1551222998-8a604fda1d22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1550977088-b31835bf616d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
<div class="col-sm-6 col-md-4 my-2">
<img src="https://images.unsplash.com/photo-1551290465-0ac783e20542?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
</div>
</div>
</div>
Related
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
I'm designing a dashboard and trying to have 2 divs (Bootstrap Card) made the same height in the same row container div. Have been googling a few solutions on SO, copy and paste those solutions but can't seem to get it right. I'm trying to have the "Resignation Breakdown" div the same height as "Resignation in {month}" div when the screen is lg (large) or more in bootstrap 4.
#resign-widget.row.col-lg-4.card {
height = 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
<link rel="stylesheet" type="text/css" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<!-- Setting up the Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
<!-- Button for expanding and collapsing the Navbar Menu -->
<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>
<!-- Navbar elements -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Action
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Dashboard Top Software Menu -->
<div id="software" class="container-fluid">
<div class="card-deck">
<div class="card" style>
<img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Unit4 Prosoft</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
<p class="card-text">All HR-related data are collected from here</p>
Login to Prosoft
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Salesforce</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
<p class="card-text">All sales and customer related data collected here</p>
Login to Salesforce
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 1 min ago</small>
</div>
</div>
<div class="card">
<img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Xero</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
<p class="card-text">All AP/AR related data are collected from here</p>
Login to Xero
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 15 mins ago</small>
</div>
</div>
</div>
</div>
<!-- Site seperator for clearer look -->
<div id="site-seperator"></div>
<!-- Dashboard body widgets of data -->
<div id="resign-widget" class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Resignation in {month}</h5>
<p class="card-text">{number} employee(s) resigned in {month}.</p>
</div>
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Resignation Breakdown</h5>
<p class="card-text">Resignation numbers by department</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- All javascript for HTML outside of body -->
<script src="mdb.js"></script><script src="resignation.js"></script>
</html>
You can just set the height of the cards to be the 100% of their parent elements, the cols in this case. Since both the cols are of the same height, this technique will work.
#resign-widget.row.col-lg-4.card {
height = 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
<link rel="stylesheet" type="text/css" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<!-- Setting up the Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
<!-- Button for expanding and collapsing the Navbar Menu -->
<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>
<!-- Navbar elements -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Action
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Dashboard Top Software Menu -->
<div id="software" class="container-fluid">
<div class="card-deck">
<div class="card" style>
<img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Unit4 Prosoft</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
<p class="card-text">All HR-related data are collected from here</p>
Login to Prosoft
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Salesforce</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
<p class="card-text">All sales and customer related data collected here</p>
Login to Salesforce
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 1 min ago</small>
</div>
</div>
<div class="card">
<img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Xero</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
<p class="card-text">All AP/AR related data are collected from here</p>
Login to Xero
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 15 mins ago</small>
</div>
</div>
</div>
</div>
<!-- Site seperator for clearer look -->
<div id="site-seperator"></div>
<!-- Dashboard body widgets of data -->
<div id="resign-widget" class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Resignation in {month}</h5>
<p class="card-text">{number} employee(s) resigned in {month}.</p>
</div>
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Resignation Breakdown</h5>
<p class="card-text">Resignation numbers by department</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- All javascript for HTML outside of body -->
<script src="mdb.js"></script><script src="resignation.js"></script>
</html>
I'm trying to make fluid vertical image that fits screen inside of modal
like
But instead, if the image is higher than the screen size, it starts bursting out of the screen with the ability to scroll it, while it's all fine with horizontal ones.
I tried playing with .imageHeight class.
I've added for images:
when i added max-height: 300px;, it squished image,
max-height 100% didn't do anything at all,
adding image-fluidclass does not seem working at all,
tried object-fit: scale-down;, but it seemed making picture smaller
but still not fitting screen.
I created Codepen here: https://codepen.io/anon/pen/mYdyrO
.imageHeight {
max-height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="block4">
<div class="row mt-5">
<div class="col-sm text-center align-middle">
<h1>Doors</h1>
</div>
</div>
<div class="row py-2">
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="0">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="1">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="2">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="3">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="4">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="5">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
</div>
<div id="lightbox4" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl modalCenter" role="document">
<!--modal-xl modal-lg-->
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" id="carousel4" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="1" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="2" class="pointer car_item active"></li>
<li data-target="#carousel4" data-slide-to="3" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="4" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="5" class="pointer car_item"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item active">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
Just use the max-height for carousel slider and slider image.
Use of object-fit:cover the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
Optionally I have used the #media for responsive later you can adjust max-height based on your requirement.
.imageHeight {
max-height: 460px;
object-fit: cover;
-o-object-fit: cover;
}
.carousel.slide {
max-height: 460px;
}
#media (max-width:767px) {
.imageHeight {
max-height: 260px;
object-fit: cover;
-o-object-fit: cover;
}
.carousel.slide {
max-height: 260px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="block4">
<div class="row mt-5">
<div class="col-sm text-center align-middle">
<h1>Doors</h1>
</div>
</div>
<div class="row py-2">
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="0">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="1">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="2">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="3">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="4">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="5">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
</div>
<div id="lightbox4" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl modalCenter" role="document">
<!--modal-xl modal-lg-->
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" id="carousel4" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="1" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="2" class="pointer car_item active"></li>
<li data-target="#carousel4" data-slide-to="3" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="4" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="5" class="pointer car_item"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item active">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
Using position:absolute method:
.carousel-item {
padding-bottom: 56%;
overflow: hidden;
position: relative;
}
.imageHeight {
object-fit: cover;
-o-object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="block4">
<div class="row mt-5">
<div class="col-sm text-center align-middle">
<h1>Doors</h1>
</div>
</div>
<div class="row py-2">
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="0">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="1">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="2">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="3">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="4">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="5">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
</div>
<div id="lightbox4" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl modalCenter" role="document">
<!--modal-xl modal-lg-->
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" id="carousel4" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="1" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="2" class="pointer car_item active"></li>
<li data-target="#carousel4" data-slide-to="3" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="4" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="5" class="pointer car_item"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item active">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
Ok, i understand how to fix this now: First we have to add div around picture, fit it into carousel, and play with image's positioning inside of that div.
I created a carousel modal for Bootstrap and can't figure out how to properly center it regardless of screensize or if for example a mobilescreen is tilted vertically.
The CSS Code I have right now properly spaces the modal on a normal pc screen, but it doesnt work on mobile screen and the MOdal appears on the top of the screen instead of appearing in the middle as it should. neither
position
nor
vertical-alignment
worked for me.
.modal {
vertical-align: middle;
padding-left: 5%;
padding-left: 5%;
padding-top: 1%;
text-align: middle;
max-height: 90vh;
max-width: 95vw;
}
.modal .carousel-inner {
max-height: 100% ! important;
position: center;
text-align: middle;
vertical-align: middle;
}
.modal .carousel .item #media (max-width: 991px) {
.modal {
padding-top: 55%;
}
}
<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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left" style="padding-bottom:3%;padding-left:0%">Gallerie</h1>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="" data-toggle="modal" data-target="#Gallerie">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
<div class="modal" id="Gallerie">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--/Gallerie-->
The modal needs the proper structure as detailed the Bootstrap 4 docs. Just use modal-dialog-centered and you don't need the extra CSS...
https://www.codeply.com/go/BDNba719xE
<div class="modal" id="Gallerie">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<style>
/* Navigation */
#logo{width: 248px;
padding-bottom:25px;
padding-top:25px;
}
.navbar-nav>li>a {
margin-right:-75px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
text-transform:uppercase;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background: black;
color:white;
}
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
background:white;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar
{
max-width:250px;
margin:0 auto;
border-radius:0;
border:0;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}
.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.sidebar-nav{background: white}
}
</style>
<div class="container-fluid">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default avbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<img id="logo" src="assets/img/logo.jpg"/>
<li class="active">Home</li>
<li>About</li>
<li class="filter" data-filter=".category-1">Animation</li>
<li class="filter" data-filter=".category-2">Commercial</li>
<li class="filter" data-filter=".category-3">Documentary</li>
<li class="filter" data-filter=".category-4">Film</li>
<li class="filter" data-filter=".category-5">Music</li>
<li class="filter" data-filter=".category-6">Video Games</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="portfolio">
<div class="pContainer">
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</div>
I need to move over the thumbnail gallery by one column. I tried many different ways but everything messes up the layout of the thumbnail gallery itself. I posted this code here but I think it is easier to visit the website to see what I am talking about http://velnikolic.com/video/portfolio.html
Your problem is not so much on moving your gallery a column over, but a better bootstrap html architecture. You declared your sidebar to occupy col-sm-3 but not the gallery to occupy the rest of it (col-sm-9). Do that and then, again, re-distribute your columns inside to show in the layout you want (3 or 4 columns) it doesn't matter.
I made this demo for you with your code
Here is what I suggest you do. It will center all your elements to use most of your browser real estate and will proportionally fix your gutters so that nothing is too heavy to one side or the other.
<div class="container-fluid">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default avbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<img id="logo" src="assets/img/logo.jpg" />
<li class="active">Home</li>
<li>About</li>
<li class="filter" data-filter=".category-1">Animation</li>
<li class="filter" data-filter=".category-2">Commercial</li>
<li class="filter" data-filter=".category-3">Documentary</li>
<li class="filter" data-filter=".category-4">Film</li>
<li class="filter" data-filter=".category-5">Music</li>
<li class="filter" data-filter=".category-6">Video Games</li>
<li>Services</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<div id="portfolio">
<div class="pContainer">
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</div>
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/video.mp4" type="video/mp4">
</video>
<footer class="navbar navbar-fixed-bottom">
<div class="footer-container container-fluid">
<div class="social-links">
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-google-plus fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</div>
</div>
</footer>
</div>
EDIT
to add more gutter to the gallery, modify the thumbnail bootstrap class as follows. Also hiding the overflow to your sidenav container will stop it from leaking into the next col-sm-*.
.thumbnail {
max-width: 231px;
margin: 20px auto;
}
.sidebar-nav {
overflow: hidden;
}