How to display bullet points under ~responsive~ horizontal timeline? - html

Question

I'm trying to display some bullet points under each of the components of this breadcrumb-style timeline. I have gotten the answer to how to put bullets under the timeline while it's full screen but I don't know how to have the points display while the screen is squished or the screen size is smaller. How would I make the points display under each of the parts of the timeline, being responsive? If anyone can help, it would be greatly appreciated.
Here is my code snippet:
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
/* bullet points under timeline */
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
/*-----------------------*/
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
#media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<div id="crumbs">
<ul class="list-unstyled">
<li class="">
<b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
<ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li></li>
<li class="">
<b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li class=""><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class=""><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
</ul>
</div>
Here are pictures of what I would like it to look like:

Answer 1

I tried it using col-xs-3. For larger screens you need to put some tries on it.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
/* bullet points under timeline */
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
/*-----------------------*/
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
#media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
</style>
<br>
<div id="crumbs">
<ul class="list-unstyled">
<li class="col-xs-3" style="padding:0px;margin:0;">
<b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
<!-- <ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul> -->
</li>
<li></li>
<li class="col-xs-3" style="padding:0px;margin:0;">
<b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<!-- <ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul> -->
</li>
<li class="col-xs-3" style="padding:0px;margin:0;"><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class="col-xs-3" style="padding:0px;margin:0;"><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
</ul>
</div>