I had previously posted on how to create an Apple style scrollbar which was built in Visual Studio. Today I'm going to detail some changes that you can make to the the Card Component in Bootstrap 4.
Where will I use this?
You're a developer that has built a desktop application and would like to create a small showcase of the app in a frame that resembles the customer's system. Even if you've created a web based application and want to show the design in a browser window with a frame that matches that of MacOS.
Implementation
Bootstrap is a very popular framework for building sites - in fact, over 20 Million websites use it.
For this example I will be using Bootstrap 4 and the Card Component whilst utilising as much of the inbuilt classes as possible.
It turns out it was very easy to develop.
First include the Bootstrap CSS - BootstrapCDN has always been a go-to to build a website off this framework.
Once the CSS has been referenced in between the <head></head> tag you can start.
Let's go through modifications needed using the example on the docs.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
The first (and main) part of the card is to add the Mac Windows controls to the top, I've utilised SVG to draw three circles to resemble the red, yellow and green options.
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
</g>
</svg>
Simply place the graphic before the Card Body to produce the below. Note that I've wrapped the SVG in a DIV tag and added some margin.
<div class="card" style="width: 18rem;">
<div class="ml-3 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
</g>
</svg>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
The final part to this is to add a shadow to give some deptch to the window. Luckily Bootstrap has a class you can add easily to any component.
The final (and very simple) piece of code to produce a Mac style window is shown below.
<div class="card">
<div class="ml-3 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
</g>
</svg>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Bonus - Dark Mode
Bootstrap has classes to show a dark background instead of the default light design.
Use the code below to show a dark window instead.
<div class="card shadow bg-dark">
<div class="ml-3 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
</g>
</svg>
</div>
<div class="card-body text-light">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link text-warning">Card link</a>
<a href="#" class="card-link text-warning">Another link</a>
</div>
</div>
