Designing Sites Using Bootswatch

In this article I am going to explain how we can design our own site using readymade styles.

Most of the people are not aware that we have some readymade styles using that we can design our own sites with perfection and it’s easy to integrate in our pages.

In the example I am going to explain how we can use the pagination from Bootswatch site.

Bootswatch is a site that gives readymade themes to design the sites, in that they have given several sample site designs which are commonly used such as Navbar, Buttons, Tables, Forms, Indicators, Progress bars, Containers and Dialogs, etc.

Steps to include the pagination styles

Step 1: Navigate to the site, you can find some samples themes.

Step 2: Choose the Simplex theme and download its styles as in the following screenshot:

Simplex theme

styles

Step 3: Preview the simplex theme and navigate to pagination.

Mouse hover on the left side of the pagination you can see <> link to download the html code for this pagination. The <> link is visible in the

Copy the code and paste in your html page (in the body tag)

html page

code

Step 4: Copy the required pagination styles from the downloaded styles for simplex theme and paste in header styles.

Final Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>RK Home Page</title>  
  6.     <style>  
  7.         .pagination {  
  8.             display: inline-block;  
  9.             padding-left0;  
  10.             margin18px 0;  
  11.             border-radius: 4px;  
  12.         }  
  13.           
  14.         .pagination > li {  
  15.             displayinline;  
  16.         }  
  17.           
  18.         .pagination > li > a,  
  19.         .pagination > li > span {  
  20.             positionrelative;  
  21.             floatleft;  
  22.             padding8px 12px;  
  23.             line-height1.42857143;  
  24.             text-decorationnone;  
  25.             color#444444;  
  26.             background-color#ffffff;  
  27.             border1px solid #dddddd;  
  28.             margin-left-1px;  
  29.         }  
  30.           
  31.         .pagination > li:first-child > a,  
  32.         .pagination > li:first-child > span {  
  33.             margin-left0;  
  34.             border-bottom-left-radius: 4px;  
  35.             border-top-left-radius: 4px;  
  36.         }  
  37.           
  38.         .pagination > li:last-child > a,  
  39.         .pagination > li:last-child > span {  
  40.             border-bottom-right-radius: 4px;  
  41.             border-top-right-radius: 4px;  
  42.         }  
  43.           
  44.         .pagination > li > a:hover,  
  45.         .pagination > li > span:hover,  
  46.         .pagination > li > a:focus,  
  47.         .pagination > li > span:focus {  
  48.             z-index3;  
  49.             color#ffffff;  
  50.             background-color#d9230f;  
  51.             border-color#d9230f;  
  52.         }  
  53.           
  54.         .pagination > .active > a,  
  55.         .pagination > .active > span,  
  56.         .pagination > .active > a:hover,  
  57.         .pagination > .active > span:hover,  
  58.         .pagination > .active > a:focus,  
  59.         .pagination > .active > span:focus {  
  60.             z-index2;  
  61.             color#ffffff;  
  62.             background-color#d9230f;  
  63.             border-color#d9230f;  
  64.             cursordefault;  
  65.         }  
  66.           
  67.         .pagination > .disabled > span,  
  68.         .pagination > .disabled > span:hover,  
  69.         .pagination > .disabled > span:focus,  
  70.         .pagination > .disabled > a,  
  71.         .pagination > .disabled > a:hover,  
  72.         .pagination > .disabled > a:focus {  
  73.             color#dddddd;  
  74.             background-color#ffffff;  
  75.             border-color#dddddd;  
  76.             cursor: not-allowed;  
  77.         }  
  78.           
  79.         .pagination-lg > li > a,  
  80.         .pagination-lg > li > span {  
  81.             padding14px 16px;  
  82.             font-size17px;  
  83.             line-height1.3333333;  
  84.         }  
  85.           
  86.         .pagination-lg > li:first-child > a,  
  87.         .pagination-lg > li:first-child > span {  
  88.             border-bottom-left-radius: 6px;  
  89.             border-top-left-radius: 6px;  
  90.         }  
  91.           
  92.         .pagination-lg > li:last-child > a,  
  93.         .pagination-lg > li:last-child > span {  
  94.             border-bottom-right-radius: 6px;  
  95.             border-top-right-radius: 6px;  
  96.         }  
  97.           
  98.         .pagination-sm > li > a,  
  99.         .pagination-sm > li > span {  
  100.             padding5px 10px;  
  101.             font-size12px;  
  102.             line-height1.5;  
  103.         }  
  104.           
  105.         .pagination-sm > li:first-child > a,  
  106.         .pagination-sm > li:first-child > span {  
  107.             border-bottom-left-radius: 3px;  
  108.             border-top-left-radius: 3px;  
  109.         }  
  110.           
  111.         .pagination-sm > li:last-child > a,  
  112.         .pagination-sm > li:last-child > span {  
  113.             border-bottom-right-radius: 3px;  
  114.             border-top-right-radius: 3px;  
  115.         }  
  116.     </style>  
  117.   
  118. </head>  
  119.   
  120. <body>  
  121.   
  122.     <h1>This styles are implemented using Bootswatch</h1>  
  123.     <p>Designed by Ramakrishna Basagalla</p>  
  124.   
  125.     <ul class="pagination pagination-sm">  
  126.         <li class="disabled">  
  127.             <a href="#">  
  128.                 <<</a>  
  129.         </li>  
  130.         <li class="active"><a href="#">1</a></li>  
  131.         <li><a href="#">2</a></li>  
  132.         <li><a href="#">3</a></li>  
  133.         <li><a href="#">4</a></li>  
  134.         <li><a href="#">5</a></li>  
  135.         <li><a href="#">>></a></li>  
  136.     </ul>  
  137.   
  138. </body>  
  139.   
  140. </html>  
Final Output of the page

Output

Hope this article helps a lot in designing the sites and ease our life for building complex styles.