I'm currently in the process of building a form wizard using Twitter's Bootstrap 4 framework.
My goal is to have the navigation within the modal's header, and the buttons located in the modal's footer.
Unfortunately, I'm facing challenges with creating arrow designs using CSS similar to this example: https://codepen.io/tiagorigoletto/pen/HCtDE.
For reference, here is my JSFiddle link: https://jsfiddle.net/kirtan3d/hxLfs20z/
Below is the HTML code I've implemented:
<div class="modal" id="registrationModal" style="position: relative; display: block; width: 700px;">
<div class="modal-dialog modal-lg" role="document">
<div id="bs4wizard" class="modal-content">
<div class="box-head box-head-accent-2" style="position: absolute;"></div>
<div class="modal-header">
<nav id="wizardNav" class="nav">
<a class="nav-link active" href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
Confirm Mobile
</a>
<a class="nav-link disabled" href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
Personal Information
</a>
<a class="nav-link disabled" href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
Business Information
</a>
</nav>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="wizardTab" class="tab-content">
<div class="tab-pane fade show active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane fade" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane fade" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
</div>
</div>
<div class="modal-footer">
<div id="wizardBtn">
<button type="button" class="btn btn-secondary prev-step">Back</button>
<button type="button" class="btn btn-secondary skip-step">Skip</button>
<button type="button" class="btn btn-primary next-step">Save and Continue</button>
</div>
</div>
</div>
</div>
</div>
This is the implementation of my CSS styles:
#wizardNav a {
color: #fff;
background: #0275d8;
border: solid 1px #025ead;
border-width: 1px 0;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.30);
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.20);
}
#wizardNav a:first-child {
border-radius: 0.3rem 0 0 0.3rem;
border-right:0;
}
#wizardNav a:last-child {
border-radius: 0 0.3rem 0.3rem 0;
border-left:0px;
}
#wizardNav a.disabled {
opacity: 0.6;
background-color: #666;
border-color:#555;
}
...
(wizardNav styling continues)
...
I also made use of simple jQuery for certain functionalities:
(Only applicable if needed)$(".next-step,.skip-step").click(function (e) {
var $activeN = $('#wizardNav .nav-link.active').next();
$activeN.removeClass('disabled');
$activeN.prev().addClass('pass');
$activeN.trigger("click");
});
$(".prev-step").click(function (e) {
var $activeP = $('#wizardFormNav .nav-link.active').prev();
$activeP.trigger("click");
if ($activeP.hasClass('active')) {
$activeP.removeClass('pass');
} else {
$activeP.addClass('pass')
};
});