Kundefeedback

custom.css

.feedbackIcon{
  font-size: 50px;
  margin: 5px;
}

.myFeedbackWrapper{
  width: 400px;
}

.myOpinionWrapper{
  width: 200px;
}

.myOpinionIcon{
  font-size: 20px;
  margin: 5px;
}

.centerWrapper{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

myFeedback.html

<!-- Start myFeedback--->
<h2 class='text-center'>Hvordan var din kjøpsopplevelse?</h2>
<div class='row centerWrapper'>
    <div class='myFeedbackWrapper'>
        <div class='col-xs-4'><button type='button' class='btn btn-success myFeedback' value='Great'><i class='fas fa-smile feedbackIcon myFeedback' value='Great'></i></button></div>
        <div class='col-xs-4'> <button type='button' class='btn btn-warning myFeedback' value='Medium'><i class='fas fa-meh feedbackIcon myFeedback' value='Medium'></i></button></div>
        <div class='col-xs-4'><button type='button' class='btn btn-danger myFeedback' value='Bad'><i class='fas fa-frown feedbackIcon myFeedback' value='Bad'></i></button></div>
    </div>
</div>
<!-- End myFeedback--->

myOpinion.html

<!-- Start myOpinion--->
<h3 class='text-center'>Hva synes du om denne artikkelen?</h2>  
<div class='row centerWrapper'>
    <div class='myOpinionWrapper'>
        <div class='col-xs-6'><button type='button' class='btn btn-primary myOpinion' value='thumbsUp'><i class='far fa-thumbs-up myOpinionIcon myOpinion' value='thumbsUp'></i></button></div>
        <div class='col-xs-6'><button type='button' class='btn btn-primary myOpinion' value='thumbsDown'><i class='far fa-thumbs-down myOpinionIcon myOpinion' value='thumbsDown'></i></button></div>
    </div>
</div>
<!-- End myOpinion--->