I cannot for the life of me figure out what's going on here. I want to increase the height of a DIV element the one with an id of #titleStrip, but it isn't happening. Very frustrated. Thought I had figured this kind of stuff out, but alas no. Time for a break. Any help is always appreciated. All the other answers referred me to checking the height of the containing element, but in this case, the containing element already has a height. Below is the code.
My code:
#charset "utf-8";
.rndImg {
width: 120px;
height: 132px;
float: left;
margin-right: 15px;
margin-left: 10px;
margin-bottom: 5px;
shape-outside: circle();
margin-top: 24px;
border: 2px solid blue;
border-radius: 75%;
}
#featured {
width: 85px;
height: 35px;
margin-left: 35px;
margin-top: 2px;
}
#titleBP_1 {
position: absolute;
top: 20px;
left: 40%;
}
#pDate {
position: relative;
left: 77%;
top: 15px;
}
#titleStrip {
width: 100%;
height: 120px;
background: Lavender;
overflow: hidden;
}
#postOnStrip {
display: inline;
}
#inOne {
width: 500px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
#inTwo {
width: 500px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
display: inline;
}
.blogTxt {
width: 480px;
font-family: font-family: 'Alegreya', serif;
/* 'Roboto', sans-serif; */
font-size: 13px;
line-height: .8em !important;
letter-spacing: .13em;
text-align: justify !important;
margin-bottom: 15px;
margin-left: 15px;
margin-top: 30px;
margin-right: 15px;
display: inline;
}
#topBlogReveal {
display: block;
margin-left: 345px;
}
#mainContentBox {
display: flex;
flex-flow: row;
flex-wrap: no-wrap;
margin-right: 15px;
}
#postBox {
border: 2px solid blue;
width: 90%;
height: 450px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
}
#topBanner {
width: 100%;
height: 120px;
}
.dCap {
float: left;
line-height: 90%;
width: 1.1em;
font-size: 600%;
font-family: georgia;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing with Div</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/newIndex.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Include google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Lato&family=Lobster&family=Montserrat&family=Open+Sans&family=Playfair+Display:ital,wght#0,400;0,500;1,400&family=Roboto&family=Viaoda+Libre&display=swap" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="javascript/index.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">About</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index_the_real_thing.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="philosophy.html">Philosphy <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="spirituality.html">Spiritualism</a>
</li>
<li class="nav-item">
<a class="nav-link" href="socialChange.html">Social Change</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</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>
<!--Zeroth Row Banner Image-->
<div class="row" id="row0">
<div class="col" id="row0_col1">
<img
class="banPics"
id="topBanner"
alt="There will always be something to read here..."
src="Images/bannerPlaceholder.jpg"
>
</div>
</div>
<div class="container-fluid">
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<div id="postBox">
<div id="titleStrip">Featured
<h3 id="titleBP_1">Blog Post #1</h3>
</div>
<div id="postOnStrip">
<p id="pDate"><b>Posted On: </b><em>June 23, 2021</em></p>
<hr class="divider">
</div>
<div id="mainContentBox">
<div id="inOne">
<img id="topBgImg" class="rndImg" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg">
<p class="blogTxt"><span class="dCap">W</span>hat if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international
anatagonisms vis a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and
tissues, the mess of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their
own impending demnise. And who can blame them Life is hard.</p>
</div>
<div id="inTwo">
<p class="blogTxt">What if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international anatagonisms vis
a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and tissues, the mess
of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their own impending demnise.
And who can blame them Life is hard.</p>
Read More
</div>
</div>
</div>
</div>
</div>
<div class="row" id="row1">
<div class="col" id="row1_col1">
</div>
</div>
<div class="row" id="row1">
<div class="col" id="row1_col1">
</div>
</div>
</div>
</body>
</html>
The most frustrated EVER. I had this page working, but then I started rebuilding it, and here I am back at square one feeling like a dullard
The parent element div#postBox has the CSS property display: flex;, which stretches the child div to its own size. If you remove display: flex; in #postBox, you will find that #titleStrip will be 120px of height. Ofcourse, the styling for #postBox will break, so you have to figure out something there. CSS Tricks has an excellent guide on flexbox here.
Related
<!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>
<style>
.navbar-custom {
background-color:rgb(128 128 128 / 18%);
height:48px;
width:100%
}
.close{
margin-bottom: 40px;
}
h5{
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10%;
}
.container-fluid {
max-width: 100%;
padding-right:0;
padding-left:0;
margin-right:0;
margin-left:0
}
html, body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
right:0;
padding-right: 0px!important;
margin-right: 0px!important;
width: 100vw;
overflow-x: hidden;
}
.row row-cols-1{
width: 100%;
right: 0;
}
.img-fluid{
max-width: 100%;
height : auto;
}
.btn btn-primary{
width: 100%;
text-align: center;
display: block;
width: 48%;
box-sizing: border-box;
text-align: center;
margin-right: 10px;
position: absolute;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-custom ">
<a class="navbar-brand" href="#">
<img src="logo.png" class="logo1" alt="logo" style="width:50px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button type="button" class="close " aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</li>
</ul>
</nav>
<div class="container-fluid ">
<h5><b>Do you have Fever above 101.4?</b></h5>
</div>
<div class="container-fluid ">
<img src="fever.png" class="img-responsive center-block d-block mx-auto mt-5" alt="logo" style="width:200px;">
</div>
</div>
<div class="container mt-5">
<div class="row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
</div>
</body>
</html>
I am experiencing a gap (space) below buttons when i'm resizing the window in vertical manner, the gap increases as i vertically upsize the window, it takes a space, i have tried different techniques including margin bottom, but didn't accomplish what i want to be, kindly suggest a solution which includes bootstrap 4. Thanks
moreover i want to center align the image on ipad such that is aligned on iphone screens
here the gap is increased
here the gap is decreased
i want to fill the gap below screen so that the image comes at center
just like it comes at center on iphone screens
Add fixed-bottom to your last div
like this:
<div class=" fixed-bottom row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
I want the blue element to expand to the bottom of the page.
But if I set the height: 100% to it, then it does expands beyond the bottom of the page. I think it does that because it doesn't take in consideration the size of the red element and then together with the size of the red element they go more that 100% of the parent.
How do I know that it expand beyond the page? Because the parent element have borders that then are shorter than the blue element.
The code looks like that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
:root {
--body-backroung-color: #e7e8e5
}
html, body {
height: 100vh;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: var(--body-backroung-color);
}
.main-content {
padding: 25px;
}
.zero-margin-lr {
margin-left: 0;
margin-right: 0;
}
.page-margin-lr {
margin-left: 9em;
margin-right: 9em;
border-left: solid 0.1em gray;
border-right: solid 0.1em gray;
}
.main-content-custom {
background-color: #e9ecef;
}
.jumbotron-custom {
margin-bottom: 0 !important;
}
.content {
margin-bottom: 1em
}
</style>
</head>
<body class="mat-typography">
<div class="container-flex page-margin-lr">
<!--RED ELEMENT-->
<div class="row">
<div class="col-12">
<div class="jumbotron text-center">
<h1>.</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/home']"
routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- BLUE ELEMENT-->
<div class="row main-content-custom zero-margin-lr">
<div class="col-2"></div>
<div class="col-8">
<div class="main-content">
<form name="newPost" #newPost="ngForm">
<div class="form-group">
<label for="title">Title</label>
<input id="title" name="title" type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea id="content" name="content" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<label for="author">Author</label>
<input id="author" name="author" type="text" class="form-control"/>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary" >Post</button>
</div>
</form>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</body>
</html>
The snippet above is inside the body element. The html and body have height: 100%
How can I make the blue element expand to the bottom of the page but don't go beyond/outside of the parent element?
So the solution for me was:
add height: auto; min-height: 100vh to the parent.
add flex: 1 to the child/blue element
Thank you to Zohir Salak for heling a lot.
I have a quite weird problem (and a few of my fellows) that we are unable to put "card" bootstrap class to screen center, we tried a lot of solutions which were available on the internet, but neither of those worked out.
Here's the div that doesn't want to move:
<div class="container h-100">
<div class="flex-center-wrap">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
and here is a quick showup of how it looks like (that div is overlapping a navbar and doesn't want to go to center), vizualization is Here
You are trying to use align-items, which is a flex item property, on a div that's not a flex item.
Also, you are trying to align on the screen, but your html and body don't have height: 100% set.
To demonstrate, you can add style="height: 100vh; display: flex;" to the parent div. As you can see below, the card is getting correctly centered.
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
/*---Media Queries --*/
#media (max-width: 992px) {
}
#media (max-width: 768px) {
}
#media (max-width: 576px) {
}
a {
color: #d7eaf4;
}
body {
color: #fff;
background: #2834d8 url(img/hotel.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
font-family: poppins,Helvetica,Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0!important;
}
.footer {
font-size: 14px;
padding-left: 1rem!important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
.h-100 {
height: 100%!important;
}
.navbar {
background: rgba(18,13,33,.8);
color: #d7eaf4;
box-shadow: 0 5px 15px #000000c0;
margin-top: 0;
margin-bottom: 0;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
<div class=" d-dlex justify-content-center align-items-center a div" style="height: 100vh; display: flex;">
<div class="d-dlex justify-content-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
add css class
.centered {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
///////////////////// add class here
<div class="centered">
<div class=" d-dlex justify-cointent-center align-items-center a div">
<div class="d-dlex justify-cointent-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm having a hard time trying to figure out how I'm able to make this Slick Accordion fully mobile responsive and it seems as if everything is overlapping on everything that I have tried.
Here is the Accordion on Desktop (Works perfectly):
Here is the Accordion on Mobile Responsiveness on (991px and less):
So I can't seem to figure out how to make all the things appear inline like the mobile version, I have tried Display/Position/etc.. attributes and have failed miserably.
Here is the code:
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small {
height: 70px!important;
}
.small:hover {
background-color: #F8E498!important;
}
.col-md-1 {
padding: 0px!important;
margin-top: 5px!important;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
}
#AccordIcon {
padding-right: 10px;
height:25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/uii8cJt.png" />
</div>
<div class="col-md-11">
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and
applications to empower teamwork and quickly find information
within your organization.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/fV0AGNi.png" />
</div>
<div class="col-md-11">
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace
offered in Office 365. Teams makes collaborating with your team
easy.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have shortened the code down for you so that only one accordion row is visible just so there isn't so much code, and I have also included the proper jQuery libraries and the Bootstrap CDN libraries.
Try the below given structure of html. Basically add d-flex align-items-center on the anchors and keep the heading and p elements in a div. And add height and widths to your images.
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Got it all figured out, since I had predefined CSS using Sharepoint Master Pages and Bootstrap it was not aligning well, but this solved the issue.
#media (max-width: 992px)
{
#slick-slide02 {
display: visible!important;
}
.col-md-1 {
float: left!important;
margin-right: 10px!important;
}
.col-md-1 img {
height: auto!important;
width: 45px!important;
}
#AccordionText {
display: flex!important;
}
.small {
height: auto!important;
}
}
.small {
height: 70px;
}
Simple css changes has fixed the trick.
I wanted to see if it was possible to add arrows to the right of the Bootstrap Accordion headings.
I want the arrows to change from down to up on accordion collapse, is this complicated?
I want just the headings to have the arrows and for them to change on collapse, but I'm having the most trouble trying to figure this out.
Here is the code:
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Update
I have now gotten it to somewhat work thanks to the help from the awesome contributors here at Stack Overflow but I've come across a small problem.
Here is my problem that I'm currently experiencing.
On page load: (Why are the arrows not pointing down on pageload?)
On first Accordion click: (Now the icon is correct)
On second Accordion click: (Perfect now)
Code:
.panel-title:after {
font-family: FontAwesome;
content: "\f106";
float: right;
color: grey;
}
.panel-title.collapsed:after {
content: "\f107";
}
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="/TrainingResourceCenter/O365Training/PublishingImages/Homepage/OneDriveAccordion.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>
Try this:
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
This is what it looks like in the snippet: PLEASE NOTE this is using font-awesome (for the arrow), so you will need the <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> in your <head> tags
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 10px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Added the attribute "collapsed" to all the individual Accordion panel-title class and it works perfectly.
<a href="#" class="list-group-item panel-title collapsed" data-toggle="collapse" data-target="#s6" data-parent="#accordion" style="background-color: #e5edf4;">
Like the Bootstrap 3 solution I linked to as a possible duplicate; this can be solved entirely through the use of [aria-expanded=true] as a CSS selector. The only difference in Bootstrap 4 is the actual HTML structure of the accordion, the CSS for applying the arrows remains the same:
.panel-title:after {
font-family: FontAwesome;
content: "\f107";
float: right;
color: grey;
}
.panel-title[aria-expanded="true"]:after {
content: "\f106";
}
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//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="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<span id="AccordionHeadings">File Storage and Sharing</span>
</a>
<div id="s0" class="sublinks collapse">
<a class="list-group-item small" href="#null">
<div class="col-md-1">
[ image ]
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.</p>
</div>
</a>
</div>
Note: If you want to use Font Awesome 5.x you may need to adjust the CSS to reference the exact font / font weight as the latest version breaks down its icons across multiple factors.