"List styled"
Bootstrap 4.1.1 Snippet by Anwar745096

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <!--Title--> <title>List Numric</title> <!--bootstrap_css--> <link rel="stylesheet" href="css/bootstrap.min.css"> <!--google_fonts--> <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800,900" rel="stylesheet"> <!--icofont_css--> <link rel="stylesheet" type="text/css" href="css/icofont.css"> <!--style_css--> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--responsive_css--> <link rel="stylesheet" type="text/css" href="css/responsive.css"> </head> <body> <!--main_section_start--> <main> <section> <div class="container"> <!--list_1_start--> <div class="mrgn_btm_50"> <h3 class="text-center text-uppercase"><strong> List 01 </strong> </h3> <div class="list1"> <ul class="list-unstyled"> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> </ul> </div> </div> <!--list_1_end--> <!--list_2_start--> <div class="mrgn_btm_50"> <h3 class="text-center text-uppercase"><strong> List 02 Icon Icofont </strong> </h3> <div class="list2"> <ul class="list-unstyled"> <li>If you do not have a problem getting on the adsf way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> </ul> </div> </div> <!--list_2_end--> <!--list_3_start--> <div class="mrgn_btm_50"> <h3 class="text-center text-uppercase"><strong> List 03 Icon Background image</strong> </h3> <div class="list3"> <ul class="list-unstyled"> <li>If you do not have a problem getting on the adsf way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> </ul> </div> </div> <!--list_3_end--> <!--list_4_start--> <div class="mrgn_btm_50"> <h3 class="text-center text-uppercase"><strong> List 04 Numeric </strong> </h3> <div class="list4"> <ol class=""> <li>If you do not have a problem getting on the adsf way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> <li>If you do not have a problem getting on the way with a few days notice, you should choose a quick start. Late arrivals are often really inexpensive because travel agencies want to fill all the places reserved for travel. At its lowest, you can go for a few hundred euros.</li> </ol> </div> </div> <!--list_4_end--> </div> </section> </main> <!--main_section_end--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
/*default_css_start*/ body{ font-family: 'Nunito', sans-serif; font-size: 18px; } .mrgn_btm_50{ margin-bottom: 50px; } /*list_1_start*/ .list1 ul li{ padding: 0px 0px 20px 0px; } .list1 ul li:last-child{ padding: 0px; } .list1 ul li:before{ content: '\efac'; font-family: 'icofont'; color: orange; margin-right: 5px; } /*list_1_end*/ /*list_2_start*/ .list2 ul li{ padding: 0px 0px 20px 25px; } .list2 ul li:last-child{ padding-bottom: 0px; } .list2 ul li:before{ content: '\efac'; font-family: 'icofont'; color: orange; position: absolute; padding: 2px 0px 0px 0px; margin: 0px 0px 0px -25px; } /*list_2_end*/ /*list_3_start*/ .list3 ul li{ padding: 0px 0px 20px 0px; } .list3 ul li:last-child{ padding-bottom: 0px; } .list3 ul li{ background: url(../images/bg_list.jpg) no-repeat 0 6px; padding-left: 25px; /* overflow: hidden; */ display: inline-block; } /*list_3_end*/ /*list_4_start*/ .list4 ol{ padding: 0px; margin: 0px; } .list4 ol li{ padding: 0px 0px 20px 27px; counter-increment: list; list-style-type: none; position: relative; } .list4 ol li:last-child{ padding-bottom: 0px; } .list4 ol li:before{ color: #73a253; content: counter(list) ")"; left: -10px; position: absolute; text-align: right; width: 26px; font-weight: bold; } /*list_4_end*/

Related: See More


Questions / Comments: