<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 ----------> <div class="container"> <div class="row mb-4"> <div class="col-12 text-center pt-3"> <h1>Score Tables Football</h1> <p>This is a basic bootstrap sorce code for make table score for football</p> <h4>You like this snippet ? click like button</h4> </div> </div> <div class="row justify-content-md-center mb-4"> <div class="col-md-6"> <!--start code--> <div class="widget"> <!-- widget title --> <div class="mb-3 text-center"> <h4> <span>Ranked</span> </h4> </div> <!-- widget content --> <table class="table small mb-5"> <thead class="thead-light"> <tr> <th scope="col"></th> <th scope="col">Team</th> <th scope="col">P</th> <th scope="col">GD</th> <th scope="col">Pts</th> </tr> </thead> <tbody> <tr class="bg-success text-white"> <th scope="row">1</th> <td>Man Utd</td> <td>12</td> <td>31</td> <td>32</td> </tr> <tr class="bg-success text-white"> <th scope="row">2</th> <td>Man City</td> <td>12</td> <td>29</td> <td>30</td> </tr> <tr class="bg-secondarytext-white"> <th scope="row">3</th> <td>Liverpool</td> <td>12</td> <td>28</td> <td>29</td> </tr> <tr class="bg-warning text-white"> <th scope="row">4</th> <td>Chelsea</td> <td>12</td> <td>20</td> <td>27</td> </tr> <tr class="bg-danger text-white"> <th scope="row">5</th> <td>Arsenal</td> <td>12</td> <td>25</td> <td>26</td> </tr> </tbody> </table> <div class="gap-0"></div> </div> <!--end code--> </div> </div> <div class="row mb-4"> <div class="col-12 text-center"> <p>Design by Ari Budin <a target="_blank" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Bootstrap.News</a></p> </div> </div> </div>