Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Designing a Client Showcase with Bootstrap

Showing off your clients and how your product or service has benefited them is integral to sales growth.

Showing off your clients and how your product or service has benefited them is integral to sales growth. Displaying them effectively so that potential clients can find relevance in the content you display is crucial to growing your business. This article will provide you with the steps to create a client showcase for your website.

Below is the HTML, CSS, and JavaScript required.

Create your Client Overview Page

The client overview page will display all of your client logos as shown above. When a logo is clicked it will direct the viewer to a detail page we will create in the next section.

Step 1 - Add the HTML below to your web page

<header class="header--type2" data-background="https://www.solodev.com/assets/clients/clients.jpg" data-height="35%" style="min-height: 353.5px; background-image: url(https://www.solodev.com/assets/clients/clients.jpg);">
  <div class="inner">
    <div class="container">
      <div class="row">
        <div class="col-md-10">
          <section class="ct-page_title">
            <div class="h1">Clients</div>
            <div class="ct-page_title-content"></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</header>
<main>
  <div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
    <div class="row">
      <div class="col-md-12 ct-content">
        <section class="clients-home">
          <div class="container">
            <div class="clients-logos text-center">
              <div class="row">
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/zeina.html" class="Zeina"><img alt="https://www.solodev.com/assets/clients/logo-zeina.png" src="https://www.solodev.com/assets/clients/logo-zeina.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Zeina</div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/logic.html" class="Logic"><img alt="https://www.solodev.com/assets/clients/logic.png" src="https://www.solodev.com/assets/clients/logic.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Logic</div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/smart.html" class="Smart"><img alt="https://www.solodev.com/assets/clients/client3.png" src="https://www.solodev.com/assets/clients/client3.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Smart</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/softtech.html" class="Softtech"><img alt="https://www.solodev.com/assets/clients/softtech.png" src="https://www.solodev.com/assets/clients/softtech.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Softtech</div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/wheel.html" class="Wheel"><img alt="https://www.solodev.com/assets/clients/logo-target.png" src="https://www.solodev.com/assets/clients/logo-target.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Wheel</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/3designs.html" class="3designs"><img alt="https://www.solodev.com/assets/clients/designx.png" src="https://www.solodev.com/assets/clients/designx.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">3designs</div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/heart.html" class="Heart"><img alt="https://www.solodev.com/assets/clients/client7.png" src="https://www.solodev.com/assets/clients/client7.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Heart</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/devtech.html" class="Devtech"><img alt="https://www.solodev.com/assets/clients/devtech.png" src="https://www.solodev.com/assets/clients/devtech.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Devtech</div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 client-logos-repeater">
                  <a href="/path/to/detail/chartz.html" class="Chartz"><img alt="https://www.solodev.com/assets/clients/chartz.png" src="https://www.solodev.com/assets/clients/chartz.png"></a>
                  <div class="logo-title">
                    <div class="displayTable">
                      <div class="displayTableCell">Chartz</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</main>

Step 2 - client-showcase.css

Download the CSS below and include it in your web page

client-showcase.css

Step 3 - Add the includes below to your Client Overview page

<link rel="stylesheet" href="client-showcase.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Create the Client Detail Page

After a viewer clicks on a logo from the Client Overview page, they will be directed to a client detail page with information specific to that client. It contains a header, sub header, graphic, description of the client, and a button to take you to that client's website.

Step 1 - Add the HTML below to your web page

<header class="header--type2" data-background="https://www.solodev.com/assets/clients/clients.jpg" data-height="35%" style="min-height: 353.5px; background-image: url(https://www.solodev.com/assets/clients/clients.jpg);">
  <div class="inner">
    <div class="container">
      <div class="row">
        <div class="col-md-10">
          <section class="ct-page_title">
            <div class="h1">Clients</div>
            <div class="ct-page_title-content"></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container">
  <div class="clients-title text-center">
    <h1>Zeina</h1>
    <p>A Reputation for Quality</p>
  </div>
</div>
<div class="clients-slider-wrapper">
  <div class="container">
    <div class="row">
      <div class="clients-slider text-center col-md-8 col-md-offset-2">
        <img alt="zeina-mockup.png" src="https://www.solodev.com/assets/clients/zeina-mockup.png">
        <div class="clearfix"></div>
        <div class="clients-line"></div>
        <div class="clients-text">
          <h2>An engaging online experience for job seekers and others in the field of design.</h2>
          <p>Zenia is one of the leading talent recruitment and outplacement firms for the architecture, interior design, engineering and manufacturing industries. The focus of Devtech's business is talent recruitment and placement so security is a high priority in order to protect the confidential nature of the job search process. That's one reason Solodev CMS's secure content management software was the right choice for this project.</p>
          <p>A dynamic jobs portal integrates with Devtech's applicant tracking system and the multi-segmented blog allows visitors to select their areas of interest. A slider manager allows Devtech staff to easily keep the site looking fresh with new homepages visuals.</p>
          <div class="launch-site-btn text-center">
            <a href="" class="btn btn-client" target="_blank">LAUNCH SITE</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2 - Add the includes below to your Client Detail page

<link href="client-showcase.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

Note: If you followed the steps above correctly your overview and detail pages should appear as they do below.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev