Post
Ask Question

Designing Sites Using Bootswatch

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-left: 0;  
  10.             margin: 18px 0;  
  11.             border-radius: 4px;  
  12.         }  
  13.           
  14.         .pagination > li {  
  15.             display: inline;  
  16.         }  
  17.           
  18.         .pagination > li > a,  
  19.         .pagination > li > span {  
  20.             position: relative;  
  21.             float: left;  
  22.             padding: 8px 12px;  
  23.             line-height: 1.42857143;  
  24.             text-decoration: none;  
  25.             color: #444444;  
  26.             background-color: #ffffff;  
  27.             border: 1px solid #dddddd;  
  28.             margin-left: -1px;  
  29.         }  
  30.           
  31.         .pagination > li:first-child > a,  
  32.         .pagination > li:first-child > span {  
  33.             margin-left: 0;  
  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-index: 3;  
  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-index: 2;  
  61.             color: #ffffff;  
  62.             background-color: #d9230f;  
  63.             border-color: #d9230f;  
  64.             cursor: default;  
  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.             padding: 14px 16px;  
  82.             font-size: 17px;  
  83.             line-height: 1.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.             padding: 5px 10px;  
  101.             font-size: 12px;  
  102.             line-height: 1.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. 


Similar Articles