title: Bootstrap bug on mobile. Can only replicate on live site. 100% stuck
body: <p>I have been working on website and my CTA Buttons look fine on computers, but on mobile they turn gradient. I can not get the gradient bug to reproduce with devtools.</p>
  <p>I have tried everything I can think of to try and get this to reproduce. I am out of ideas.</p>
  <p>I am new to coding, so my code is a little sloppy. Please forgive me. I have added the code to codepen here: <a href="https://codepen.io/rob-connolly/pen/JjXQJgq" rel="nofollow noreferrer">https://codepen.io/rob-connolly/pen/JjXQJgq</a></p>
  <p>live site where you can see bug on mobile: <a href="https://grobconnolly.github.io/cloverweb/" rel="nofollow noreferrer">https://grobconnolly.github.io/cloverweb/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
  .service-5 {
    font-family: "Montserrat", sans-serif;
    color: #636468;
    font-weight: 300;
  }
  
  .service-5 h1,
  .service-5 h2,
  .service-5 h3,
  .service-5 h4,
  .service-5 h5,
  .service-5 h6 {
    color: #3e4555;
  }
  
  .service-5 a {
    text-decoration: none;
  }
  
  .service-5 .linking {
    color: #3e4555;
  }
  
  .service-5 .linking:hover {
    color: #316ce8;
  }
  
  .service-5 .font-weight-medium {
    font-weight: 500;
  }
  
  .service-5 .bg-light {
    background-color: #f4f8fa !important;
  }
  
  .service-5 .subtitle {
    color: #8d97ad;
    line-height: 24px;
  }
  
  .service-5 .card.card-shadow {
    -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
    box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  }
  
  .service-5 .wrap-service5-box .card-body {
    padding: 30px;
  }
  
  .service-5 .wrap-service5-box .text-success-gradiant {
    background: #f47820;
    background: -webkit-linear-gradient(legacy-direction(to right), #f47820 0%, #f47820 100%);
    background: -webkit-gradient(linear, left top, right top, from(#f47820), to(#f47820));
    background: -webkit-linear-gradient(left, #f47820 0%, #f47820 100%);
    background: -o-linear-gradient(left, #f47820 0%, #f47820 100%);
    background: linear-gradient(to right, #f47820 0%, #f47820 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
  }
  
  .service-5 .wrap-service5-box .icon-size {
    font-size: 45px;
  }
  
  .service-5 .btn-md {
    padding: 15px 45px;
    font-size: 16px;
  }
  
  #textWhite {
    color: white;
    font-size: 25px;
  }
  
  .featureSection {
    margin-top: 30px;
  }
  
  .ourFeatures {
    margin-bottom: 50px;
  }
  
  * {
    font-family: "Montserrat", sans-serif;
    color: #636468;
  }
  
  .heroText {
    font-weight: 900;
    font-size: 50px;
    color: #373E42;
    padding-top: 4%;
    padding-bottom: .3%;
  }
  
  #subHeroText {
    font-size: 40px;
    font-weight: 400;
    color: #6b7175;
    margin-top: 0px;
  }
  
  #setupText {
    font-size: 22px;
    color: rgb(107, 113, 117);
    margin-bottom: 0.3em;
    padding-top: 1em;
  }
  
  #heroButton {
    font-size: 25px;
  }
  
  #cancelAnytime {
    font-size: 22px;
    color: rgb(107, 113, 117);
    padding-bottom: 1em;
  }
  
  .mainSubjects {
    font-weight: 400;
    font-size: 28px;
    padding-top: 1em;
    padding-bottom: .2em;
  }
  
  .footer {
    padding: 30px 0;
    background: #eee !important;
    width: 100%
  }
  
  .priceText {
    font-size: 15px;
    font-weight: 100;
  }
  
  .secondSection {
    background-color: white;
    width: 100%;
  }
  
  .extraPad {
    padding-bottom: 4%;
  }
  
  .question1 {
    border: 1px solid black;
  }
  
  .priceBox {
    border-width: thin;
    border-color: #E9EEF1;
    border-style: solid;
    padding-top: 3%;
  }
  
  .dollarSymbol,
  .mo,
  .amount {
    padding-bottom: 4%;
  }
  
  #extraSpace {
    padding-left: 100px;
    padding-right: 100px;
  }
  
  .dollarSymbol {
    font-size: 20px;
    font-weight: 400;
  }
  
  .amount {
    font-size: 60px;
    font-weight: 900;
  }
  
  .mo {
    padding-top: 3%;
    padding-left: 3%;
  }
  
  .faq {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  #priceIcons {
    padding-left: 20%;
  }
  
  .iconFeatures {
    padding-left: 0%;
  }
  
  .iconTextPrice {
    padding-left: 3%;
    font-size: 14px;
    font-weight: 200;
    padding-top: 1%;
  }
  
  .iconUs {
    left: 27%;
    padding-top: 3%;
    padding-bottom: 4%;
  }
  
  .textIcon {
    color: black;
    font-weight: 200;
  }
  
  #heroButtonPricing {
    font-size: 20px;
    width: 300px;
  }
  
  li {
    font-size: 12px;
    justify-content: left;
  }
  
  .heroBottom {
    background-color: white;
  }
  
  .heroSection {
    background-color: #F8FBFC;
  }
  
  .liRight {
    text-align: left;
    margin-left: 3em;
  }
  
  .navbar {
    background-color: #F8FBFC;
  }
  
  li.borderless {
    border: 0 none;
    padding-top: 0;
  }
  
  .subHeroTextBottom {
    font-size: 12px;
    color: rgb(107, 113, 117);
    padding-top: 1px;
  }
  
  .mainSubjects {
    font-weight: 400;
    font-size: 28px;
    padding-top: 1em;
    padding-bottom: .2em;
  }
  
  .mainSubjectsWhy {
    font-weight: 400;
    font-size: 28px;
    padding-top: 2em;
    padding-bottom: .2em;
  }
  
  .mainSubjectsFaq {
    font-weight: 400;
    font-size: 28px;
    padding-top: 8em;
    padding-bottom: .2em;
  }
  
  .subjectHeader {
    font-weight: 400;
    font-weight: 100;
    font-size: 18px;
    padding-top: 0;
    padding-bottom: .2em;
  }
  
  .readyToSignUp {
    font-weight: 100;
    font-size: 18px;
    padding-top: 0;
    margin-bottom: .1em;
  }
  
  .secondSubject {
    padding-top: 15px;
  }
  
  .thirdTitle {
    padding-top: 15px
  }
  
  .calButton {
    padding-top: 400px;
  }
  
  .featureIconLeft1 {
    left: 10%;
  }
  
  .featureTextLeft1 {
    left: 6%;
  }
  
  .featureIconRight2 {
    left: 5%;
  }
  
  .featureTextRight2 {
    left: 1%;
  }
  
  .robpic {
    width: 200px;
  }
  
  .name {
    font-size: 10px;
    padding-bottom: 0;
    margin-bottom: 0px;
  }
  
  .title {
    font-size: 8px;
    padding-bottom: 2em;
  }
  
  .sectionSpace {
    margin-top: 0px;
    padding-top: 1.2em;
  }
  
  .backGround {
    background-color: #F8FBFC;
    width: 100%;
  }
  
  .tjFooterLogo {
    max-width: 100px
  }
  
  #noBorder {
    border: none;
    width: 30%;
    padding-top: 3%;
    padding-bottom: 4%;
    background-color: #F8FBFC;
  }
  
  .footerText {
    font-size: 12px;
    padding-bottom: .5em;
  }
  
  .fullWidth {
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
  
  .footerLogo {
    width: 50%;
    padding-top: 8%;
    padding-bottom: 4%;
  }
  
  .footerTextCopy {
    font-style: normal;
    color: rgb(107, 113, 117);
    font-size: 10px;
  }
  
  .name {
    font-size: 18px;
    font-weight: 200;
  }
  
  .title {
    font-size: 14px;
    font-weight: 400;
  }
  
  @media only screen and (min-width: 980px) {
    .mainSubjects,
    .mainSubjectsWhy {
      font-size: 32px;
    }
    .subjectContent {
      font-size: 22px;
    }
  }
  
  @media only screen and (min-width: 1224px) {
    .heroText {
      font-size: 64px;
      padding-top: 4%;
      padding-left: 20%;
      padding-right: 20%;
    }
    .subHeroText {
      font-size: 20px;
      word-spacing: .2em;
    }
    .btn-primary {
      width: 150px;
    }
    .mainSubjects {
      font-size: 40px;
      font-weight: 900;
    }
    .subjectContent {
      font-size: 20px;
    }
    .name {
      font-size: 20px;
      font-weight: 400;
    }
    .title {
      font-size: 15px;
      font-weight: 200;
    }
    .footerLogo {
      width: 20%;
      margin-top: 0;
      padding-top: 2em;
      padding-bottom: 10px;
    }
    .footerText {
      font-size: 15px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;900&amp;display=swap" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
    &lt;link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"&gt;
  
  
    &lt;title&gt;Clover Networks and TextJet Loyalty&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-md navbar-light"&gt;
      &lt;a href="./index.html" class="navbar-brand"&gt;
        &lt;img src="./assets/images/TextJet.png" height="28" alt="CoolBrand"&gt;
      &lt;/a&gt;
      &lt;button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarCollapse"&gt;
        &lt;div class="navbar-nav"&gt;
          &lt;a href="#" class="nav-item nav-link"&gt;How it Works&lt;/a&gt;
          &lt;a href="https://support.textjet.com/en/" class="nav-item nav-link"&gt;FAQ&lt;/a&gt;
          &lt;a href="#pricingSection" class="nav-item nav-link"&gt;Pricing&lt;/a&gt;
  
        &lt;/div&gt;
        &lt;div class="navbar-nav ml-auto"&gt;
          &lt;a href="#pricingSection" class="nav-item nav-link"&gt;Sign Up&lt;/a&gt;
          &lt;a href="https://app.textjet.com/app/login" class="nav-item nav-link"&gt;Login&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/nav&gt;
  
    &lt;div class="container-flex heroSection"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;h1 class='heroText text-center'&gt;Powerful loyalty software for small businesses!
          &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-12 text-center"&gt;
          &lt;h2 id="subHeroText"&gt;Now available on Clover Networks!
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-12 text-center"&gt;
          &lt;div id="setupText"&gt;Get set-up in minutes. &lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-12 text-center"&gt;
            &lt;a href="#pricingSection" id="heroButton" type="button" class="btn btn-success"&gt;Sign Up&lt;/a&gt;
            &lt;div class="row"&gt;
              &lt;div id="cancelAnytime" class="col-12 text-center"&gt;No commitment. Cancel anytime.&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;img class="img-fluid" src="./assets/images/hero-image.png" alt="TextJet Hero images"&gt;
            &lt;img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container secondSection"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;h3 class="mainSubjects"&gt;Powerful Loyalty&lt;/h3&gt;
          &lt;p class="subjectContent"&gt;Streamline your loyalty platform to maximize your reach. TextJet helps you turn occasional customers into loyal fans. We have spent countless hours designed and developing a system that will give you the upper hand over your competition. Not sure
            if TextJet is right for you... schedule a demo and find out why hundreds of businesses rely on TextJet. &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;img class="img-fluid" src="./assets/images/happy-customer1.png" alt="Happy Customer"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;img class="img-fluid" src="./assets/images/happy-customer2.png" alt="Happy Customer"&gt;
  
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;h3 class="mainSubjects"&gt;Marketing Autopilot&lt;/h3&gt;
          &lt;p class="subjectContent"&gt;We know running a business can be time restraining. With TextJet Marketing Autopilot we provide a powerful marketing suite without little to no effort on your part! After you set-up your account with one of our Customer Support Representatives,
            everything will be in place for you to see results with TextJet! &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;h3 class="mainSubjects"&gt;Retention Plus&lt;/h3&gt;
          &lt;p class="subjectContent"&gt;TextJet retention plus is a really cool tool we built to help you keep your customers coming back. Let's pretend Suzy comes into your store today, but you don't see her for 30+ days. TextJet retention starts to go to work for you. Our tools help
            entice Suzy to come back to your store. It's really an amazing tool for your business!
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;img class="img-fluid" src="./assets/images/happy-customer3.png" alt="Happy Customer"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;!--  Features--&gt;
    &lt;div class="bg-light py-5 service-5 featureSection"&gt;
      &lt;div class="container"&gt;
        &lt;!-- Row  --&gt;
        &lt;div class="row"&gt;
          &lt;!-- Column --&gt;
          &lt;div class="col-12 text-center"&gt;
            &lt;p class="mainSubjects ourFeatures"&gt;Our Features&lt;/p&gt;
  
          &lt;/div&gt;
          &lt;div class="col-md-4 wrap-service5-box"&gt;
            &lt;div class="card card-shadow border-0 mb-4"&gt;
              &lt;div class="card-body d-flex"&gt;
                &lt;div class="mr-4 mb-2 text-success-gradiant icon-size"&gt;&lt;i class="far fa-comment"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div class=""&gt;
                  &lt;h6 class="font-weight-medium"&gt;&lt;a href="javascript:void(0)" class="linking"&gt;Rich
                                              Messaging&lt;/a&gt;&lt;/h6&gt;
                  &lt;p class="mt-3"&gt;Send beautiful images or videos directly to your customers' cell phones.
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Column --&gt;
          &lt;!-- Column --&gt;
          &lt;div class="col-md-4 wrap-service5-box"&gt;
            &lt;div class="card card-shadow border-0 mb-4"&gt;
              &lt;div class="card-body d-flex"&gt;
                &lt;div class="mr-4 mb-2 text-success-gradiant icon-size"&gt;&lt;i class="fab fa-medapps"&gt;&lt;/i&gt;
  
                &lt;/div&gt;
                &lt;div class=""&gt;
                  &lt;h6 class="font-weight-medium"&gt;&lt;a href="javascript:void(0)" class="linking"&gt;Retention
                                              Plus&lt;/a&gt;&lt;/h6&gt;
                  &lt;p class="mt-3"&gt;TextJet tracks how long it's been since a customer has been to your store. We set-up triggers to bring them back to your store. &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Column --&gt;
          &lt;!-- Column --&gt;
          &lt;div class="col-md-4 wrap-service5-box"&gt;
            &lt;div class="card card-shadow border-0 mb-4"&gt;
              &lt;div class="card-body d-flex"&gt;
                &lt;div class="mr-4 mb-2 text-success-gradiant icon-size"&gt;&lt;i class="far fa-paper-plane"&gt;&lt;/i&gt;
  
                &lt;/div&gt;
                &lt;div class=""&gt;
                  &lt;h6 class="font-weight-medium"&gt;&lt;a href="javascript:void(0)" class="linking"&gt;Handsfree
                                              Marketing&lt;/a&gt;&lt;/h6&gt;
                  &lt;p class="mt-3"&gt;TextJet is an easy to use marketing solution built for small businesses. It takes about 4 minutes to set-up and your account will be ready to go.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Column --&gt;
          &lt;!-- Column --&gt;
          &lt;div class="col-md-4 wrap-service5-box"&gt;
            &lt;div class="card card-shadow border-0 mb-4"&gt;
              &lt;div class="card-body d-flex"&gt;
                &lt;div class="mr-4 mb-2 text-success-gradiant icon-size"&gt;&lt;i class="far fa-chart-bar"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div class=""&gt;
                  &lt;h6 class="font-weight-medium"&gt;&lt;a href="javascript:void(0)" class="linking"&gt;Analytics &amp;
                                              Tracking
                                          &lt;/a&gt;&lt;/h6&gt;
                  &lt;p class="mt-3"&gt;We have reporting in place so you can see how your account is performing. We want you to see the value of TextJet!&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Column --&gt;
          &lt;!-- Column --&gt;
          &lt;div class="col-md-4 wrap-service5-box"&gt;
            &lt;div class="card card-shadow border-0 mb-4"&gt;
              &lt;div class="card-body d-flex"&gt;
                &lt;div class="mr-4 mb-2 text-success-gradiant icon-size"&gt;&lt;i class="far fa-object-group"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div class=""&gt;
                  &lt;h6 class="font-weight-medium"&gt;&lt;a href="javascript:void(0)" class="linking"&gt;2-Way
                                              Messaging&lt;/a&gt;&lt;/h6&gt;
                  &lt;p class="mt-3"&gt;You can have a 2-way conversation with your customers using TextJet. This is a great customer service tool.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Column --&gt;
          &lt;!-- Column --&gt;
          &lt;div class="col-md-4 wrap-service5-box"&gt;
            &lt;div class="card card-shadow border-0 mb-4"&gt;
              &lt;div class="card-body d-flex"&gt;
                &lt;div class="mr-4 mb-2 text-success-gradiant icon-size"&gt;&lt;i class="far fa-gem"&gt;&lt;/i&gt;&lt;/div&gt;
                &lt;div class=""&gt;
                  &lt;h6 class="font-weight-medium"&gt;&lt;a href="javascript:void(0)" class="linking"&gt;SmartPulse
                                              (coming soon)&lt;/a&gt;&lt;/h6&gt;
                  &lt;p class="mt-3"&gt;Find out how your customers feel about your store. Resolve issues and keep your customers happy&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-12 text-center"&gt;
            &lt;div id="setupText"&gt;Get set-up in minutes. &lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-12 text-center"&gt;
                &lt;a href="#pricingSection" id="heroButton" type="button" class="btn btn-primary"&gt;Sign
                                      Up&lt;/a&gt;
                &lt;div class="row"&gt;
                  &lt;div id="cancelAnytime" class="col-12 text-center"&gt;No commitment. Cancel anytime.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
    &lt;!-- End Features--&gt;
  
  
  
  
    &lt;!-- Pricing --&gt;
  
    &lt;div class="container-flex sectionSpace bg-white"&gt;
      &lt;div class="row"&gt;
  
        &lt;div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"&gt;
          &lt;a id="pricingSection"&gt;&lt;/a&gt;
          &lt;h1 class="mainSubjects"&gt;Pricing&lt;/h1&gt;
          &lt;p class="subHeroText"&gt;Our plans are designed to grow with you! No contracts, no set-up fees, and awesome customer support is included in all packages. &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="container"&gt;
          &lt;div class="card-deck mb-3 text-center"&gt;
            &lt;div class="card mb-4 shadow-sm"&gt;
              &lt;div class="card-header"&gt;
                &lt;h4 class="my-0 font-weight-normal"&gt;Starter Plan&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;h1 class="card-title pricing-card-title"&gt;$1 &lt;small class="text-muted"&gt;/
                                              mo&lt;/small&gt;&lt;/h1&gt;
                &lt;ul class="list-unstyled mt-3 mb-4 priceText"&gt;
  
                  &lt;li class="priceText"&gt;Points Rewards&lt;/li&gt;
                  &lt;li class="priceText"&gt;Custom Branding&lt;/li&gt;
                  &lt;li class="priceText"&gt;Handsfree Markting&lt;/li&gt;
                  &lt;li class="priceText"&gt;Fraud Protection&lt;/li&gt;
                  &lt;li class="priceText"&gt;Promo Text Messaging&lt;/li&gt;
                  &lt;li class="priceText"&gt;2-way Messaging&lt;/li&gt;
                  &lt;li class="priceText"&gt;Reporting&lt;/li&gt;
                  &lt;li class="priceText"&gt;50 SMS/ Month&lt;/li&gt;
                &lt;/ul&gt;
                &lt;button type="button" class="btn btn-lg btn-block btn-primary"&gt;Get
                                          started&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card mb-4 shadow-sm"&gt;
              &lt;div class="card-header"&gt;
                &lt;h4 class="my-0 font-weight-normal"&gt;Business Plan&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;h1 class="card-title pricing-card-title"&gt;$39 &lt;small class="text-muted"&gt;/
                                              mo&lt;/small&gt;&lt;/h1&gt;
                &lt;ul class="list-und mt-3 mb-4 priceText"&gt;
  
                  &lt;li class="priceText"&gt;Points Rewards&lt;/li&gt;
                  &lt;li class="priceText"&gt;Custom Branding&lt;/li&gt;
                  &lt;li class="priceText"&gt;Handsfree Markting&lt;/li&gt;
                  &lt;li class="priceText"&gt;Fraud Protection&lt;/li&gt;
                  &lt;li class="priceText"&gt;Promo Text Messaging&lt;/li&gt;
                  &lt;li class="priceText"&gt;2-way Messaging&lt;/li&gt;
                  &lt;li class="priceText"&gt;Reporting&lt;/li&gt;
                  &lt;li class="priceText"&gt;1000 SMS/ Month&lt;/li&gt;
                &lt;/ul&gt;
                &lt;button type="button" class="btn btn-lg btn-block btn-primary"&gt;Get
                                          started&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card mb-4 shadow-sm"&gt;
              &lt;div class="card-header"&gt;
                &lt;h4 class="my-0 font-weight-normal"&gt;Pro Plan&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;h1 class="card-title pricing-card-title"&gt;$89 &lt;small class="text-muted"&gt;/
                                              mo&lt;/small&gt;&lt;/h1&gt;
                &lt;ul class="list-unstyled mt-3 mb-4"&gt;
                  &lt;li class="priceText"&gt;Points Rewards&lt;/li&gt;
                  &lt;li class="priceText"&gt;Custom Branding&lt;/li&gt;
                  &lt;li class="priceText"&gt;Handsfree Markting&lt;/li&gt;
                  &lt;li class="priceText"&gt;Fraud Protection&lt;/li&gt;
                  &lt;li class="priceText"&gt;Promo Text Messaging&lt;/li&gt;
                  &lt;li class="priceText"&gt;2-way Messaging&lt;/li&gt;
                  &lt;li class="priceText"&gt;Reporting&lt;/li&gt;
                  &lt;li class="priceText"&gt;5000 SMS/ Month&lt;/li&gt;
                &lt;/ul&gt;
                &lt;button type="button" class="btn btn-lg btn-block btn-primary"&gt;Get
                                          Started&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;/section&gt;
  
  
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;h3 class="mainSubjects text-center"&gt;Ready to see the TextJet difference?&lt;/h4&gt;
            &lt;p class='subHeroText text-center'&gt;We are here to help you grow your business!
              &lt;/h2&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-12 text-center"&gt;
                  &lt;div id="setupText"&gt;Get set-up in 15 minutes.
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                    &lt;div class="col-12 text-center"&gt;
                      &lt;a href="#pricingSection" id="heroButton" type="button" class="btn btn-primary"&gt;Sign
                              Up&lt;/a&gt;
                      &lt;div class="row"&gt;
                        &lt;div id="cancelAnytime" class="col-12 text-center"&gt;No commitment, Cancel anytime.
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
  
                &lt;div class="container-flex footer"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-4 text-center"&gt;
                      &lt;img class="footerLogo" src="./assets/images/textjet_fitted.png" alt="textjet logo" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-4"&gt;
                      &lt;div class="col-12 text-center footerText"&gt;Pricing&lt;/div&gt;
                      &lt;div class="col-12 text-center footerText"&gt;FAQ&lt;/div&gt;
                      &lt;div class="col-12 text-center footerText"&gt;Contact Support&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-4"&gt;
                      &lt;div class="col-12 text-center footerText"&gt;Privacy Policy&lt;/div&gt;
                      &lt;div class="col-12 text-center footerText"&gt;Terms of Service&lt;/div&gt;
                      &lt;div class="col-12 text-center footerText"&gt;Anti-Spam Policy&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-12 text-center footerTextCopy"&gt;
                      © Copyright 2020 Textjet LLC
                    &lt;/div&gt;
                  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/pitOb.jpg" rel="nofollow noreferrer">Mobile Version</a></p>
  <p>[Web Version<a href="https://i.stack.imgur.com/3eotD.png" rel="nofollow noreferrer">2</a></p>