Form Step With B4 Style01

<!DOCTYPE html>
<html>
<head>
  <title>FORM STEP WITH B4 | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="FORM STEP WITH B4">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

  <div class="container">
    <div class="stepwizard">
        <div class="stepwizard-row setup-panel">
            <div class="stepwizard-step">
                <a href="#step-1" type="button" class="btn btn-primary btn-circle"><span class="fa fa-cubes"></span></a>
                <p>Type</p>
            </div>
            <div class="stepwizard-step">
                <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-info-circle"></span></a>
                <p>Reason</p>
            </div>
            <div class="stepwizard-step">
                <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-tags"></span></a>
                <p>Value</p>
            </div>
            <div class="stepwizard-step">
                <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-user"></span></a>
                <p>Details</p>
            </div> 
            <div class="stepwizard-step">
                <a href="#step-5" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-calendar"></span></a>
                <p>Dates</p>
            </div>
            <div class="stepwizard-step">
                <a href="#step-6" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-cogs"></span></a>
                <p>Status</p>
            </div>
            <div class="stepwizard-step">
                <a href="#step-7" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-th-list"></span></a>
                <p>Position</p>
            </div>
        </div>
    </div>
    <form role="form">
        <div class="row setup-content" id="step-1">
            <div class="col-xs-12">
                <div class="col-md-12">
                    <h4>What type of claim is it?</h4>
                    <div class="funkyradio">
                      <div class="funkyradio-primary">
                          <input type="radio" name="type" id="radio1" required="required" />
                          <label for="radio1">Personal Injury</label>
                      </div>
                      <div class="funkyradio-primary">
                          <input type="radio" name="type" id="radio2" required="required" />
                          <label for="radio2">Professional Negligence</label>
                      </div>
                      <div class="funkyradio-primary">
                          <input type="radio" name="type" id="radio3" required="required" />
                          <label for="radio3">Medical Negligence</label>
                      </div>
                      <div class="funkyradio-primary">
                          <input type="radio" name="type" id="radio4" required="required" />
                          <label for="radio4">Employment Issue</label>
                      </div>
                      <div class="funkyradio-primary">
                          <input type="radio" name="type" id="radio5" required="required" />
                          <label for="radio5">Other</label>
                      </div>
                    </div>
                    <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
                </div>
            </div>
        </div>
        <div class="row setup-content" id="step-2">
              <div class="col-xs-12">
                  <div class="col-md-12">
                      <h4>Why do you want to transfer?</h4>
                  <div class="funkyradio">
                  <div class="funkyradio-primary">
                      <input type="radio" name="reason" id="radio6" required="required" />
                      <label for="radio6">Unreasonable Delay</label>
                  </div>
                  <div class="funkyradio-primary">
                      <input type="radio" name="reason" id="radio7" required="required" />
                      <label for="radio7">Conflict Of Interest</label>
                  </div>
                  <div class="funkyradio-primary">
                      <input type="radio" name="reason" id="radio8" required="required" />
                      <label for="radio8">Low Interest</label>
                  </div>
                  <div class="funkyradio-primary">
                      <input type="radio" name="reason" id="radio9" required="required" />
                      <label for="radio9">Second Opinion</label>
                  </div>
                  <div class="funkyradio-primary">
                      <input type="radio" name="reason" id="radio11" required="required" />
                      <label for="radio11">Other</label>
                  </div>
              </div>
              <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
        </div>
        </div>
    </div>
        <div class="row setup-content" id="step-3">
            <div class="col-xs-12">
                <div class="col-md-12">
        
                    <h4>What is the value?</h4>
                     <div class="funkyradio">
            <div class="funkyradio-primary">
                <input type="radio" name="value" id="radio12" required="required" />
                <label for="radio12">Under £5,000</label>
     </div>
          <div class="funkyradio-primary">
                <input type="radio" name="value" id="radio13" required="required" />
                <label for="radio13">£5,000 - £10,000</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="value" id="radio14" required="required" />
                <label for="radio14">£10,000 - £25,000</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="value" id="radio15" required="required" />
                <label for="radio15">£25,000 - £50,000</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="value" id="radio16" required="required" />
                <label for="radio16">Over £50,000</label>
            </div>            
        </div>                
                    <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
                </div>
            </div>
        </div>
        <div class="row setup-content" id="step-4">
            <div class="col-xs-12">
                <div class="col-md-12">
         
            <h4>What are your details?</h4>
              <div class="form-group">
             <label for="name">Full Name</label>
             <input type="text" name="fullname" id="fullname" required="required" class="form-control"/>
             </div>
               <div class="form-group">
             <label for="name">Email Address</label>
             <input type="email" name="email" id="email" required="required" class="form-control"/>
             </div>
               <div class="form-group">
              <label for="name">Telephone Number</label>
             <input type="number" name="email" id="email" required="required" class="form-control" />
             </div>
                <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="submit" >Confirm</button>
                   
                </div>
            </div>
        </div> 
        
        <div class="row setup-content" id="step-5">
            <div class="col-xs-12">
                <div class="col-md-12">
    
                         <h4>Please provide the claim dates</h4>
    <label>Incident Date?</label>
                   <div class="row">			  
                   <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="incidentdateday">Day</label>
             <input type="text" name="incidentdateday" id="incidentdateday" required="required" class="form-control"/>
             </div>
             </div>
             <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="incidentdatemonth">Month</label>
             <input type="text" name="incidentdatemonth" id="incidentdatemonth" required="required" class="form-control"/>
             </div>
             </div>
             <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="incidentdateyear">Year</label>
             <input type="text" name="incidentdateyear" id="incidentdateyear" required="required" class="form-control"/>
             </div>
             </div>
             </div>
    <label>Limitation Date?</label>
                   <div class="row">			  
                   <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="limitationdateday">Day</label>
             <input type="text" name="limitationdateday" id="limitationdateday" required="required" class="form-control"/>
             </div>
             </div>
             <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="limitationdatemonth">Month</label>
             <input type="text" name="limitationdatemonth" id="limitationdatemonth" required="required" class="form-control"/>
             </div>
             </div>
             <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="limitationdateyear">Year</label>
             <input type="text" name="limitationdateyear" id="limitationdateyear" required="required" class="form-control"/>
             </div>
             </div>
             </div>
    <label>Next Court Date?</label>
                   <div class="row">			  
                   <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="nextcourtdateday">Day</label>
             <input type="text" name="nextcourtdateday" id="nextcourtdateday" required="required" class="form-control"/>
             </div>
             </div>
             <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="nextcourtdatemonth">Month</label>
             <input type="text" name="nextcourtdatemonth" id="nextcourtdatemonth" required="required" class="form-control"/>
             </div>
             </div>
             <div class="col-xs-4">			  
                    <div class="form-group">				
             <label for="nextcourtdateyear">Year</label>
             <input type="text" name="nextcourtdateyear" id="nextcourtdateyear" required="required" class="form-control"/>
             </div>
             </div>
             </div>
             
                    <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
                </div>
            </div>
        </div>
        
        <div class="row setup-content" id="step-6">
            <div class="col-xs-12">
                <div class="col-md-12">
     
                    <h4>Why is the status of your claim?</h4>
      
              <div class="form-group">
             <label for="name">Current Solicitors</label>
             <input type="text" required="required" class="form-control"/>
             </div>
              <label>Funding Arrangement?</label>
        
                             <div class="funkyradio">
            <div class="funkyradio-primary">
                <input type="radio" name="type" id="radio41" required="required" />
                <label for="radio41">CFA</label>
     </div>
          <div class="funkyradio-primary">
                <input type="radio" name="type" id="radio42" required="required" />
                <label for="radio2">DBA</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="type" id="radio43" required="required" />
                <label for="radio43">PRIVATE</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="type" id="radio44" required="required" />
                <label for="radio44">LEI</label>
            </div>
            <div class="funkyradio-primary">
                <input type="radio" name="type" id="radio45" required="required" />
                <label for="radio45">Other</label>
            </div>
            
        </div>
               
                    <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
                </div>
            </div>
        </div>
        
        <div class="row setup-content" id="step-7">
            <div class="col-xs-12">
                <div class="col-md-12">
        
            
                         <h3>What is the current position?</h3>
                    <div class="funkyradio">
            <div class="funkyradio-primary">
                <input type="radio" name="reason" id="radio46" required="required" />
                <label for="radio46">Pre-Action</label>
     </div>
          <div class="funkyradio-primary">
                <input type="radio" name="reason" id="radio47" required="required" />
                <label for="radio47">Pproceedings</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="reason" id="radio48" required="required" />
                <label for="radio48">Allocated To A Track</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="reason" id="radio49" required="required" />
                <label for="radio49">Dismissed - Appeal</label>
            </div>
             <div class="funkyradio-primary">
                <input type="radio" name="reason" id="radio51" required="required" />
                <label for="radio51">I Do Not Know</label>
            </div>
            
            
        </div>
                    <button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" id="gotoConsent">Next</button>
                </div>
            </div>
        </div>
    </form>
    </div>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body{ 
  margin-top:0px; 
}


  .navbar-brand-centered {
      display: block;
      width: auto;
      text-align: center;
      margin-top:0;
      padding: 0px !important;

  }
  .navbar>.container .navbar-brand-centered, 
  .navbar>.container-fluid .navbar-brand-centered {
      margin-left: -80px;
  }


.stepwizard-step p {
  margin-top: 10px;
  
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
  
}

.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;

}

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-index: 0;

}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}


.funkyradio div {
clear: both;
overflow: hidden;
}

.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;

}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;

cursor: pointer;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: ' ';
text-indent: .9em;
color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #000;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: ' ';
text-indent: .9em;
color: #fff;
background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}

.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}

.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
.stepwizard-row .btn {
  padding: 5px;
}

$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
                $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-primary').addClass('btn-default');
            $item.addClass('btn-primary');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='radio'],input[type='email'],input[type='number'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for(var i=0; i<curInputs.length; i++){
            if (!curInputs[i].validity.valid){
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid)
            nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-primary').trigger('click');
});
Timeline style02

Timeline style02

Timeline style01

Timeline style01

Tablet style code texte

Tablet style code texte

Page 404 exemple 01

Page 404 exemple 01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Carousel Bootstrap4

Carousel Bootstrap4

Bootstrap4 datepicker

Bootstrap4 datepicker

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Background div gradient

Background div gradient

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js