How to put bullets under breadcrumb timeline? - html

Question

I'm trying to put some bullet points underneath a breadcrumb-style timeline, however I can't figure out how to do it. I have tried this:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul>
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</li>
<br>
<li> point here</li>
</ul>
</div>
<div id="crumbs">
<ul>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<li><b>STEP 3:</b><br>Mock<br>OSCEs</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</li>
</ul>
</div>
But it separates one part of the timeline from the rest. I would like the timeline to be together.
Here is the HTML code of the working timeline, without bullet points:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul class= "point">
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</li>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)</li>
<li><b>STEP 3:</b><br>Mock<br>OSCEs</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</li>
</ul>
</div>
Can someone let me know how I would do this? Thanks.
Here is the 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: em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0px 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%;
}
#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;
}
}

Answer 1

I think that put another unsorted list inside of the items, may be what you are looking for:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul class="point">
<li>
<b>STEP 1:</b>
<ul>
<li>
Sign up and pay for<br>the options<br> you want
</li>
</ul>
</li>
<li>
<b>STEP 2:</b>
<ul>
<li>
Sign up for<br>online sessions<br>(held most weeks)
</li>
</ul>
</li>
...
</ul>
</div>

Answer 2

Add this ruleset to CSS:
.bullet {
font-size: 50px;
color: #000;
text-align: center;
margin: 20px auto;
}
and add this above and under each <li>:
<li class='bullet'>∗</li>
PLUNKER
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;
}
#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;
}
.bullet {
font-size: 50px;
color: #000;
text-align: center;
margin: 20px auto;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#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;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul>
<li class='bullet'>∗</li>
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
</li>
<li class='bullet'>∗</li>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
</li>
<li class='bullet'>∗</li>
<li><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class='bullet'>∗</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
<li class='bullet'>∗</li>
</ul>
</div>
</body>
</html>

Answer 3

May be below code will help! I have removed media queries form styles to avoid complexity.
There
I have added a nested ul within the main ul list items.
Added a CSS class named "test" to the nested ul. Use a proper name to the class accordingly.
Break the style inheritance from the parent ul by adding !important
Add the styles to make it as a usual unorderd list
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 {
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
ul.test {
float: left;
margin-top: 200px;
margin-left: -150px;
}
ul.test 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 0px 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;
}
<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="test">
<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="test">
<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>
JSFiddle