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.
Related
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.
I have layout with feature list content box, in desktop version it looks pretty fine, but in smaller versions i have problems pad / mobile and that four words with icons just breaking. I think it was not the best solution for this content box layout, what is the best and cleanest way to do this?
I need same look for desktop and for mobile.
Expecting result:
.container {
padding: 0;
}
padding: 71px 0px 0px 0px;
img {
margin-bottom: 6px;
}
h2 {
font-size: 18px;
font-weight: bold;
color: #363636;
text-align: center;
margin-bottom: 7px;
}
p {
font-size: 16px;
line-height: normal;
color: #363636;
}
a {
font-size: 14px;
color: #333333;
border-bottom: 1px solid #ef5300;
text-decoration: none;
padding-bottom: 2px;
}
.col-lg-12 {
padding: 25px 20px 20px 20px;
border-radius: 4px;
border: solid 1px #e9e9e9;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<title>My title</title>
</head>
<body>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 h-100">
<img src="icons/furniture.png" class="mx-auto d-block">
<h2>Nestandartinių baldų gamyba</h2>
<div class="row">
<div class="col-lg-7">
<span class="far fa-check-square"></span>Privačios paskirties
<span class="far fa-check-square"></span>Viešosios paskirties
</div>
<div class="col-lg-5">
<span class="far fa-check-square"></span>Korpusiniai
<span class="far fa-check-square"></span>Minkšti
</div>
</div>
<p class="text-center">Naudojamos medžiagos<span class="icon-rightcircle"></span></p>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
If you want the same "2 rows 2 columns" layout for those list feature box for all desktop and mobile, here's the simple css grid approach:
.list-feature {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="list-feature">
<span class="far fa-check-square">Privačios paskirties</span>
<span class="far fa-check-square">Korpusiniai</span>
<span class="far fa-check-square">Viešosios paskirties</span>
<span class="far fa-check-square">Minkšti</span>
</div>
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.
This question already has answers here:
How can I center an image in Bootstrap?
(4 answers)
Closed 4 years ago.
I'm working on a random quote web app and I can't center the image horizontally. Usually, this is acquired using mx-auto. My image is inside a div with size col-12, and the div is inside a row. However, image still not centering. If anyone can point out what am I missing? thanks
link http://pctechtips.org/apps/quotes/
code
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
css
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
Add classes d-flex align-items-center to the col-12 div containing the image
Add d-block class to img that make your image center.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image d-block">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
or add text-center to it parent.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12 text-center">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
I am implementing Bootstrap Collapse to my website by clicking an icon from the Font Awesome library. When I press it, the content collapses, but there is no animation, it just pops up. What am I doing wrong?
Here's my code
<div class="container col-sm-12 banner">
<i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
<div id="moreInfo" class="collapse">
<div class="hiddenInfo">
123
</div>
</div>
You're running into a conflict due to your improper implementation of Bootstrap's Grid system. .container and .col-sm-12 cannot be combined in this fashion; it results in a series of floating errors that conflicts with the transition effect.
Once you correctly implement Bootstrap's Grid (and address clear issues with your other float) the transition animates as expected.
.banner {
background-color: #1194f0;
padding: 20px;
}
.banner i {
font-size: 40px;
float: right;
line-height: 50px;
}
.hiddenInfo {
background-color: black;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="banner clearfix">
<i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
</div>
<div class="col-sm-12">
<div id="moreInfo" class="collapse">
<div class="hiddenInfo">
123
</div>
</div>
</div>
</div>
</div>