Bootstrap 4.1.1 выравнивание центра нижнего колонтитула по правой границе

Question

Вот мой дизайн для нижнего колонтитула

Вот мой код для дизайна нижнего колонтитула, основанный на Bootstrap 4.1.1

.mainfooter-area {
  background: #404044;
  padding: 100px 0;
}

.mainfooter-area h2 {
  color: #ffffff;
  font-family: "TrebuchetMS", sans-serif;
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .mainfooter-area h2 {
    color: #ffffff;
    font-family: "TrebuchetMS", sans-serif;
    font-size: 18px;
    margin-bottom: 1em;
    letter-spacing: 1px;
  }
}

@media (max-width: 991px) {
  .mainfooter-area {
    padding: 50px 0;
  }
}

.ll-footer-about {
  position: relative;
}

.ll-footer-about:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 80%;
}

.ll-footer-about p {
  text-align: justify;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  width: 75%;
}

@media (max-width: 991px) {
  .ll-footer-about {
    margin-bottom: 50px;
  }
}

.ll-footer-ourcompany,
.ll-footer-faq {
  position: relative;
}

.ll-footer-ourcompany:after,
.ll-footer-faq:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 80%;
}

.ll-footer-ourcompany a,
.ll-footer-faq a {
  position: relative;
  display: block;
  color: #8b8b8b;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 2px;
}

.ll-footer-ourcompany a::before,
.ll-footer-ourcompany a::after,
.ll-footer-faq a::before,
.ll-footer-faq a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.ll-footer-ourcompany a::before,
.ll-footer-faq a::before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.ll-footer-ourcompany a::after,
.ll-footer-faq a::after {
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.ll-footer-ourcompany a:hover::before,
.ll-footer-ourcompany a:hover::after,
.ll-footer-ourcompany a:focus::before,
.ll-footer-ourcompany a:focus::after,
.ll-footer-faq a:hover::before,
.ll-footer-faq a:hover::after,
.ll-footer-faq a:focus::before,
.ll-footer-faq a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.ll-footer-ourcompany a:hover,
.ll-footer-faq a:hover {
  text-decoration: none;
  color: #ffffff;
}

@media (max-width: 991px) {
  .ll-footer-ourcompany::after,
  .ll-footer-faq::after {
    border-right: none;
  }
  .ll-footer-ourcompany {
    margin-bottom: 50px;
  }
  .ll-footer-faq {
    margin-bottom: 50px;
  }
}

.ll-footer-newsletter p {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  margin-bottom: 2em;
}

.ll-subscription {
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .ll-subscription {
    max-width: 300px;
    display: block;
    padding-bottom: 20px;
    margin: auto;
  }
}

.ll-subscription form {
  font-family: "Roboto", sans-serif;
  border-radius: 30px;
}

.ll-subscription form button {
  border: none;
  font-size: 25px;
  padding: 3px 15px;
  /*gradient*/
  background: #ca4989;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 1px #404044;
  box-shadow: 0 0 1px #404044;
}

.ll-flex {
  align-items: center;
  display: flex;
}

.ll-subscription form input {
  padding: 10px 18px;
  height: 43px;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: #a2aebb;
  font-size: 15px;
  border: 1px solid #8b8b8b;
  border-right: none;
  width: 100%;
  background: transparent;
}

.ll-subscription form input:focus {
  outline: none;
}

.ll-socialmedia {
  margin-top: 30px;
  max-width: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.ll-socialmedia a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
}

.ll-socialmedia a:hover {
  text-decoration: none;
  color: #ffffff;
}

.ll-socialmedia a.social-facebook {
  /*gradient*/
  background: #2156C2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-twitter {
  /*gradient*/
  background: #1B95E0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-instagram {
  /*gradient*/
  background: #DD4B3E;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-googleplus {
  /*gradient*/
  background: #F90731;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-pinterest {
  /*gradient*/
  background: #BD0A1D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

@media (max-width: 768px) {
  .ll-socialmedia {
    display: flex;
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 1200px) {
  .ll-footer-about {
    position: relative;
  }
  .ll-footer-about:after {
    content: '';
    border: 0;
    position: absolute;
    right: 0;
    top: 20%;
    width: 0;
    height: 0;
  }
  .ll-footer-about p {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="mainfooter-area">
  <div class="container-fluid">
    <div class="row mx-md-5">

      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-about text-center text-md-left">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi aut cumque eligendi exercitationem molestiae molestias natus nisi odio officia perspiciatis quo repellendus saepe soluta sunt suscipit, tenetur! Commodi, distinctio.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus, odit tempora ullam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ipsam. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Placeat, quas!
          </p>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-center">
        <div class="ll-footer-ourcompany  text-left">
          <h2>Our Company</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-faq">
          <h2>Help and Faq</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-md-left text-center">
        <h2>Subscribe</h2>
        <div class="ll-footer-newsletter">
          <p>Subscribe to get the latest news, update and offer information. Don't worry, we won't send spam!
          </p>

          <!--Footer Newsletter Subscription-->
          <div class="ll-subscription">
            <form autocomplete="off" action="/subscribe" method="post">
              <div class="ll-flex">
                <div style="flex: 1 1 0;">
                  <input type="email" name="email" placeholder="john@example.com">
                </div>
                <div style="margin-left: -20px;">
                  <button type="submit" disabled="disabled">&#8594;</button>
                </div>
              </div>
            </form>
          </div>
          <!--End Footer Newsletter Subscription-->

          <!--Footer Social Media-->
          <div class="ll-socialmedia">
            <a class="social-facebook" href=""><i class="fa fa-facebook"></i></a>
            <a class="social-twitter" href=""><i class="fa fa-twitter"></i></a>
            <a class="social-instagram" href=""><i class="fa fa-instagram"></i></a>
            <a class="social-googleplus" href=""><i class="fa fa-google-plus"></i></a>
            <a class="social-pinterest" href=""><i class="fa fa-pinterest-p"></i></a>
          </div>
          <!--End Footer Social Media-->

        </div>
      </div>
    </div>


  </div>
</div>

Я столкнулся с некоторой проблемой, связанной с выравниванием по правой полосе и центру, но выравнивание текста по левому краю.

Спасибо

Answer 1

Создайте контейнер для столбца flex (используя d-flex), и тогда вы сможете легко центрировать содержимое (используя justify-content-center).

Я также настроил псевдоэлемент, который создает границы:

.mainfooter-area {
  background: #404044;
  padding: 100px 0;
}

.mainfooter-area h2 {
  color: #ffffff;
  font-family: "TrebuchetMS", sans-serif;
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .mainfooter-area h2 {
    color: #ffffff;
    font-family: "TrebuchetMS", sans-serif;
    font-size: 18px;
    margin-bottom: 1em;
    letter-spacing: 1px;
  }
}

@media (max-width: 991px) {
  .mainfooter-area {
    padding: 50px 0;
  }
}

.ll-footer-about:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
}

.ll-footer-about p {
  text-align: justify;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  width: 75%;
}

@media (max-width: 991px) {
  .ll-footer-about {
    margin-bottom: 50px;
  }
}

.ll-footer-ourcompany,
.ll-footer-faq {
}

.ll-footer-ourcompany:after,
.ll-footer-faq:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
}

.ll-footer-ourcompany a,
.ll-footer-faq a {
  position: relative;
  display: block;
  color: #8b8b8b;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 2px;
}

.ll-footer-ourcompany a::before,
.ll-footer-ourcompany a::after,
.ll-footer-faq a::before,
.ll-footer-faq a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.ll-footer-ourcompany a::before,
.ll-footer-faq a::before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.ll-footer-ourcompany a::after,
.ll-footer-faq a::after {
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.ll-footer-ourcompany a:hover::before,
.ll-footer-ourcompany a:hover::after,
.ll-footer-ourcompany a:focus::before,
.ll-footer-ourcompany a:focus::after,
.ll-footer-faq a:hover::before,
.ll-footer-faq a:hover::after,
.ll-footer-faq a:focus::before,
.ll-footer-faq a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.ll-footer-ourcompany a:hover,
.ll-footer-faq a:hover {
  text-decoration: none;
  color: #ffffff;
}

@media (max-width: 991px) {
  .ll-footer-ourcompany::after,
  .ll-footer-faq::after,
  .ll-footer-about::after{
    border-right: none;
  }
  .ll-footer-ourcompany {
    margin-bottom: 50px;
  }
  .ll-footer-faq {
    margin-bottom: 50px;
  }
}

.ll-footer-newsletter p {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  margin-bottom: 2em;
}

.ll-subscription {
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .ll-subscription {
    max-width: 300px;
    display: block;
    padding-bottom: 20px;
    margin: auto;
  }
}

.ll-subscription form {
  font-family: "Roboto", sans-serif;
  border-radius: 30px;
}

.ll-subscription form button {
  border: none;
  font-size: 25px;
  padding: 3px 15px;
  /*gradient*/
  background: #ca4989;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 1px #404044;
  box-shadow: 0 0 1px #404044;
}

.ll-flex {
  align-items: center;
  display: flex;
}

.ll-subscription form input {
  padding: 10px 18px;
  height: 43px;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: #a2aebb;
  font-size: 15px;
  border: 1px solid #8b8b8b;
  border-right: none;
  width: 100%;
  background: transparent;
}

.ll-subscription form input:focus {
  outline: none;
}

.ll-socialmedia {
  margin-top: 30px;
  max-width: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.ll-socialmedia a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
}

.ll-socialmedia a:hover {
  text-decoration: none;
  color: #ffffff;
}

.ll-socialmedia a.social-facebook {
  /*gradient*/
  background: #2156C2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-twitter {
  /*gradient*/
  background: #1B95E0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-instagram {
  /*gradient*/
  background: #DD4B3E;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-googleplus {
  /*gradient*/
  background: #F90731;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-pinterest {
  /*gradient*/
  background: #BD0A1D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

@media (max-width: 768px) {
  .ll-socialmedia {
    display: flex;
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 1200px) {
  .ll-footer-about p {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="mainfooter-area">
  <div class="container-fluid">
    <div class="row mx-md-5">

      <div class="col-md-3 col-sm-12 d-flex">
        <div class="ll-footer-about text-center text-md-left">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi aut cumque eligendi exercitationem molestiae molestias natus nisi odio officia perspiciatis quo repellendus saepe soluta sunt suscipit, tenetur! Commodi, distinctio.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus, odit tempora ullam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ipsam. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Placeat, quas!
          </p>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 d-flex justify-content-center">
        <div class="ll-footer-ourcompany ">
          <h2>Our Company</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 d-flex justify-content-center">
        <div class="ll-footer-faq">
          <h2>Help and Faq</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-md-left text-center">
        <h2>Subscribe</h2>
        <div class="ll-footer-newsletter">
          <p>Subscribe to get the latest news, update and offer information. Don't worry, we won't send spam!
          </p>

          <!--Footer Newsletter Subscription-->
          <div class="ll-subscription">
            <form autocomplete="off" action="/subscribe" method="post">
              <div class="ll-flex">
                <div style="flex: 1 1 0;">
                  <input type="email" name="email" placeholder="john@example.com">
                </div>
                <div style="margin-left: -20px;">
                  <button type="submit" disabled="disabled">&#8594;</button>
                </div>
              </div>
            </form>
          </div>
          <!--End Footer Newsletter Subscription-->

          <!--Footer Social Media-->
          <div class="ll-socialmedia">
            <a class="social-facebook" href=""><i class="fa fa-facebook"></i></a>
            <a class="social-twitter" href=""><i class="fa fa-twitter"></i></a>
            <a class="social-instagram" href=""><i class="fa fa-instagram"></i></a>
            <a class="social-googleplus" href=""><i class="fa fa-google-plus"></i></a>
            <a class="social-pinterest" href=""><i class="fa fa-pinterest-p"></i></a>
          </div>
          <!--End Footer Social Media-->

        </div>
      </div>
    </div>


  </div>
</div>