title: how to center inline inside a div in bootstrap
body: <p>I had created some cards where the text was centered inline next to icons like <a href="https://i.stack.imgur.com/7ncuD.png" rel="nofollow noreferrer">this:</a></p>
  
  <p>Now much later I am being told I have to import bootstrap into the project and redesign everything but by importing bs it has thrown off the alignment of all the cards. Right now I'm flexing them and flex-wraping the content but that doesn't seem to help much. <a href="https://codepen.io/ispitinmyspittoon/pen/bzQMGM" rel="nofollow noreferrer">here is a codepen snippet of what I have.</a> 
  `
  <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>#slider,
  .wrap,
  .slide-content {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    height: 100%;
  }
  
  .wrap {
    position: relative;
    grid-row-start: 1;
    grid-row-end: 5;
  }
  
  .slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
  }
  
  .slide1 {
    background-image: url("pics/purple_jerseys.jpg");
  }
  .slide2 {
    background-image: url("pics/soccer_boys.jpg");
  }
  .slide3 {
    background-image: url("pics/soccer girl.jpg");
  }
  
  .slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .slide-content span {
    font-size: 4rem;
    color: #fff;
    position: absolute;
    top: 8px;
    right: 45px;
    left: 8px;
    text-shadow: 2px 2px 4px #000000;
  }
  
  .arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 0;
    height: 0;
    border-style: solid;
  }
  
  #arrow-left {
    border-width: 30px 40px 30px 0;
    border-color: transparent #fff transparent transparent;
    left: 0;
    margin-left: 30px;
  }
  
  #arrow-right {
    border-width: 30px 0 30px 40px;
    border-color: transparent transparent transparent #fff;
    right: 0;
    margin-right: 30px;
  }
  
  .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(5, 20%);
    grid-gap: 1em;
    margin-top: 1em;
    margin-right: 1em;
    margin-left: 1em;
  
  }
  
  .footer {
    border: 2px solid #FFBB3F;
    background-color: white;
  }
  
  .card-container {
    display: grid;
    grid-gap: 20px;
  }
  
  .card {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #FFBB3F;
    background: white;
    color: black;
    justify-content: center;
  }
  .card h1 {
    width: 100%;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    background-color: #002664;
    color: #FFBB3F;
    margin-top: 0px;
  }
  
  .ref-icon {
    height: 23px;
    color: #FFBB3F;
    margin-top: 4px;
  }
  
  .card p {
    width: 80%;
  }
  
  .card img {
    margin: auto;
  }
  
  .card * {
    margin-top: 0;
  }
  
  .socials {
    display: flex;
    justify-content: space-between;
    margin: 7px;
    padding: 7px;
  
  }
  
  .donate-button {
    font-size: 20px;
    background-color: #002664;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
  }
  
  .donate-button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  
  .fa fa-facebook-official:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  
  .fa fa-facebook-official {
    color: #002664;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt; &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="styles.css" class=""&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;&lt;/head&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="wrap"&gt;
      &lt;div id="arrow-left" class="arrow"&gt;&lt;/div&gt;
      &lt;div id="slider"&gt;
        &lt;div class="slide slide1"&gt;
          &lt;div class="slide-content"&gt;
            &lt;span&gt;VOLUNTEER: BECOME A COACH&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="slide slide2"&gt;
          &lt;div class="slide-content"&gt;
            &lt;span&gt;VOLUNTEER: BECOME A COACH&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="slide slide3"&gt;
          &lt;div class="slide-content"&gt;
            &lt;span&gt;VOLUNTEER: BECOME A COACH&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="arrow-right" class="arrow"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;div class="card-container"&gt;
      &lt;div class="card"&gt;
          &lt;h1&gt;Spring Registration Open&lt;/h1&gt;
          &lt;i class="fa fa-pencil-square-o fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;p&gt;Core registration for Spring 2019 is now open. &lt;a href="#"&gt;Register here&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;h1&gt;CORE WINTER SCHEDULE&lt;/h1&gt;
        &lt;i class="fa fa-list-ol fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;p&gt;Core winter schedule has been published and is available &lt;a href="#"&gt;here&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;h1&gt;BECOME A COACH/REFEREE&lt;/h1&gt;
        &lt;img src="pics/whistle.svg" height="40px"&gt;
        &lt;p&gt;Registration for the youth winter referee course is now open. &lt;a href="#"&gt;Register here&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;h1&gt;FIELD STATUS&lt;/h1&gt;
        &lt;i class="fa fa-sun-o fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;p&gt;Winter Mon, Wed, Sat DA sessions have openings &lt;a href="#"&gt;Register here&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="socials"&gt;
        &lt;button class="donate-button "&gt;DONATE&lt;/button&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-facebook-official fa-4x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-instagram fa-4x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://use.fontawesome.com/3ddfd35ac9.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;
  
  // Clear all images
  function reset() {
    for (let i = 0; i &lt; sliderImages.length; i++) {
      sliderImages[i].style.display = "none";
    }
  }
  
  // Init slider
  function startSlide() {
    reset();
    sliderImages[0].style.display = "block";
  }
  
  // Show prev
  function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = "block";
    current--;
  }
  
  // Show next
  function slideRight() {
    reset();
    sliderImages[current + 1].style.display = "block";
    current++;
  }
  
  // Left arrow click
  arrowLeft.addEventListener("click", function() {
    if (current === 0) {
      current = sliderImages.length;
    }
    slideLeft();
  });
  
  // Right arrow click
  arrowRight.addEventListener("click", function() {
    if (current === sliderImages.length - 1) {
      current = -1;
    }
    slideRight();
  });
  
  startSlide();
  
  &lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>` Its pretty simple I just need help aligning things correctly.</p>