Multi-Column Ordered List
How do I make an multi-column ordered list?
A multi-column or multi-row list using pseudo elements and counters to keep a common count across several ordered list elements.. What is a multi-column ordered list? How do you make a multi-column ordered list? This script and codes were developed by Christopher Williams on 09 August 2022, Tuesday.
Multi-Column Ordered List - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-Column Ordered List</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class=""> <h2 class="text-center">Product Features</h2> <br /><br /> <div class="row padded partnering-feats"> <div class="col-xs-5 col-xs-offset-1 col-sm-5 col-sm-offset-1"> <ol> <li>Ability to track formative and summative assessments.</li> <li>Generate both proficiency-based transcripts and course-based transcripts. </li> <li>Multi-year data reporting, across classes. </li> </ol> </div> <div class="col-xs-5 col-xs-offset-1 col-sm-5"> <ol> <li>Report habits of work separately from academic standards</li> <li>Dual reporting of grades as an option, giving parents the standard’s rubric scores as well as traditional grades </li> <li>Bulk reporting tools so you can generate progress reports for the whole school that can be emailed home or printed out. </li> </ol> </div> </div> </div> </div>
</div>
</body>
</html>Multi-Column Ordered List - Script Codes CSS Codes
.partnering-feats { counter-reset: item;
}
.partnering-feats ol { padding-left: 15px; list-style-type: none;
}
.partnering-feats ol li { margin-bottom: 1.5em; position: relative;
}
.partnering-feats ol li:before { content: counter(item) " "; counter-increment: item; position: absolute; right: 105%; top: -.25em; font-size: 1.75em;
}
| Developer | Christopher Williams |
| Username | itschriswilliams |
| Uploaded | August 09, 2022 |
| Rating | 3 |
| Size | 2,362 Kb |
| Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Responsive Pricing Chart | 1,825 Kb |
| Sitemap_new_v2.xml | 24,147 Kb |
| Simple Accordion Script using jQuery | 1,478 Kb |
| Fixed Position Elvis | 1,263 Kb |
| Half Height Background Color | 2,144 Kb |
| Ghost Button | 1,608 Kb |
| CSS Ghost Button | 2,117 Kb |
| Horizontal menu, full width sub menu | 2,073 Kb |
| Lightweight Responsive YouTube Embed | 1,723 Kb |
| Responsive MegaNav | 4,371 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
| Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
| Random Gradients - JS | Aldlevine | 2,026 Kb |
| Degree Picker | Idered | 4,307 Kb |
| A form arranged using automatic placement. | Vikasford | 2,103 Kb |
| Flip test | Madhes | 1,635 Kb |
| Font stack | Adrianjacob | 1,868 Kb |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| SVG Playground | Roygwells | 1,834 Kb |
| Easing | GreenSock | 2,043 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!