html css twitter-bootstrap responsive-design footer

How to add a footer-type-text on a masthead-only site?

How to add a footer-type text (the one including a copyright disclaimer) on a masthead-only site? Everytime I add a footer that gets stacked outside the masthead, making the screen scrollable. The intention is to get the copyright (and link to privacy terms) included in the masthead (images of the end-goal attached below).

I've shown my progress through images attached.

The intention is to have the copyright line displayed differently depending on the screen size:

For desktop: added to the bottom left aligned under to the newsletter form (see attached images)
For mobile: centered under the social logos (see attached images)

On my progress so far: The below is what I've managed to get implemented. Any pointers would be highly appreciated!

These are the current views on desktop and mobile:

Current desktop:desktop
Current mobile: mobile

This what I want to get implemented:

To be on desktop:what I want to implement on desktop
To be on mobile: what I want to implement on mobile - ignore the blue ugly background behind the copyright

HTML:

<html lang="en">

    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>X</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/coming-soon.min.css" rel="stylesheet">

    </head>

    <body>

    <div class="overlay"></div>
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="mp4/bg.mp4" type="video/mp4">
    </video>

    <div class="masthead">
      <div class="masthead-bg"></div>
      <div class="container h-100">
        <div class="row h-100">
          <div class="col-12 my-auto">
            <div class="masthead-content text-white py-5 py-md-0">
              <h1 class="mb-3">Register</h1>
              <p class="mb-5">Building a X.
              We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
                <div class="input-group input-group-newsletter">
                  <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon">
                  <div class="input-group-append">
                    <button class="btn btn-secondary" type="submit">Notify Me! 
    </button>
                  </div
                  </div>
            </div>
            <p class="footer-text">© 2018 X Ltd. All Rights Reserved</p>
          </div>
        </div>
      </div>
    </div>

    <div class="social-icons">
      <ul class="list-unstyled text-center mb-0">
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-envelope"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-medium"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-linkedin"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
      </ul>
    </div>




    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/coming-soon.min.js"></script>

  </body>

</html>


    html {
    height: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Merriweather;
    font-weight: 700
}

body {
    height: 100%;
    min-height: 35rem;
    position: relative;
    font-family: 'Source Sans Pro';
    font-weight: 300
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 0
}

@media (pointer:coarse) and (hover:none) {
    body {
        background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
        background-position: cover
    }
    body video {
        display: none
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #cd9557;
    opacity: .7;
    z-index: 1
}

.masthead {
    position: relative;
    overflow: hidden;
    padding-bottom: 3rem;
    z-index: 2
}

.masthead .masthead-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 35rem;
    height: 100%;
    background-color: rgba(0, 46, 102, .8);
    transform: skewY(4deg);
    transform-origin: bottom right
}

.masthead .masthead-content h1 {
    font-size: 2.5rem
}

.masthead .masthead-content p {
    font-size: 1.2rem
}

.masthead .masthead-content p strong {
    font-weight: 700
}

.masthead .masthead-content .input-group-newsletter input {
    font-size: 1rem;
    padding: 1rem
}

.masthead .masthead-content .input-group-newsletter button {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem
}

@media (min-width:768px) {
    .masthead {
        height: 100%;
        min-height: 0;
        width: 40.5rem;
        padding-bottom: 0
    }
    .masthead .masthead-bg {
        min-height: 0;
        transform: skewX(-8deg);
        transform-origin: top right
    }
    .masthead .masthead-content {
        padding-left: 3rem;
        padding-right: 10rem
    }
    .masthead .masthead-content h1 {
        font-size: 3.5rem
    }
    .masthead .masthead-content p {
        font-size: 1.3rem
    }
}

.social-icons {
    position: absolute;
    margin-bottom: 2rem;
    width: 100%;
    z-index: 2
}

.social-icons ul {
    margin-top: 2rem;
    width: 100%;
    text-align: center
}

.social-icons ul>li {
    margin-left: .75rem;
    margin-right: .75rem;
    display: inline-block
}

.social-icons ul>li>a {
    display: block;
    color: #fff;
    background-color: rgba(0, 46, 102, .8);
    border-radius: 100%;
    font-size: 1rem;
    line-height: 2rem;
    height: 2rem;
    width: 2rem
}

@media (min-width:768px) {
    .social-icons {
        margin: 0;
        position: absolute;
        right: 2.5rem;
        bottom: 2rem;
        width: auto
    }
    .social-icons ul {
        margin-top: 0;
        width: auto
    }
    .social-icons ul>li {
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 2rem
    }
    .social-icons ul>li:last-child {
        margin-bottom: 0
    }
    .social-icons ul>li>a {
        transition: all .2s ease-in-out;
        font-size: 1rem;
        line-height: 2rem;
        height: 2rem;
        width: 2rem
    }
    .social-icons ul>li>a:hover {
        background-color: #002e66
    }
}

.btn-secondary {
    background-color: #cd9557;
    border-color: #cd9557
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
    background-color: #ba7c37!important;
    border-color: #ba7c37!important
}

.input {
    font-weight: 300!important
}

.footer-text {
    padding: 10px;
    color: #fff
  }

CSS:

html {
    height: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Merriweather;
    font-weight: 700
}

body {
    height: 100%;
    min-height: 35rem;
    position: relative;
    font-family: 'Source Sans Pro';
    font-weight: 300
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 0
}

@media (pointer:coarse) and (hover:none) {
    body {
        background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
        background-position: cover
    }
    body video {
        display: none
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #cd9557;
    opacity: .7;
    z-index: 1
}

.masthead {
    position: relative;
    overflow: hidden;
    padding-bottom: 3rem;
    z-index: 2
}

.masthead .masthead-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 35rem;
    height: 100%;
    background-color: rgba(0, 46, 102, .8);
    transform: skewY(4deg);
    transform-origin: bottom right
}

.masthead .masthead-content h1 {
    font-size: 2.5rem
}

.masthead .masthead-content p {
    font-size: 1.2rem
}

.masthead .masthead-content p strong {
    font-weight: 700
}

.masthead .masthead-content .input-group-newsletter input {
    font-size: 1rem;
    padding: 1rem
}

.masthead .masthead-content .input-group-newsletter button {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem
}

@media (min-width:768px) {
    .masthead {
        height: 100%;
        min-height: 0;
        width: 40.5rem;
        padding-bottom: 0
    }
    .masthead .masthead-bg {
        min-height: 0;
        transform: skewX(-8deg);
        transform-origin: top right
    }
    .masthead .masthead-content {
        padding-left: 3rem;
        padding-right: 10rem
    }
    .masthead .masthead-content h1 {
        font-size: 3.5rem
    }
    .masthead .masthead-content p {
        font-size: 1.3rem
    }
}

.social-icons {
    position: absolute;
    margin-bottom: 2rem;
    width: 100%;
    z-index: 2
}

.social-icons ul {
    margin-top: 2rem;
    width: 100%;
    text-align: center
}

.social-icons ul>li {
    margin-left: .75rem;
    margin-right: .75rem;
    display: inline-block
}

.social-icons ul>li>a {
    display: block;
    color: #fff;
    background-color: rgba(0, 46, 102, .8);
    border-radius: 100%;
    font-size: 1rem;
    line-height: 2rem;
    height: 2rem;
    width: 2rem
}

@media (min-width:768px) {
    .social-icons {
        margin: 0;
        position: absolute;
        right: 2.5rem;
        bottom: 2rem;
        width: auto
    }
    .social-icons ul {
        margin-top: 0;
        width: auto
    }
    .social-icons ul>li {
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 2rem
    }
    .social-icons ul>li:last-child {
        margin-bottom: 0
    }
    .social-icons ul>li>a {
        transition: all .2s ease-in-out;
        font-size: 1rem;
        line-height: 2rem;
        height: 2rem;
        width: 2rem
    }
    .social-icons ul>li>a:hover {
        background-color: #002e66
    }
}

.btn-secondary {
    background-color: #cd9557;
    border-color: #cd9557
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
    background-color: #ba7c37!important;
    border-color: #ba7c37!important
}

.input {
    font-weight: 300!important
}

.footer-text {
    padding: 10px;
    color: #fff
  }

Solution

For others coming across this question:

Use Bootstrap's 'mastfoot'.

In specific, outside the masthead div create the following divs:

<div class="mastfoot">
  <div class="inner-mastfoot">
    &copy; 2018 X Ltd. All Rights Reserved. &nbsp;&nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/legal">Legal</a> &nbsp;&nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/contact">Contact</a>
  </div>
</div>

Then define 'mastfoot' and 'inner-mastfoot' styling as follows:

For the mobile view:

.mastfoot {
    color: #262626;
    color: rgba(26, 26, 26, .5);
    position: absolute;
    bottom: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 2
}

.inner-mastfoot {
    font-size: 0.8rem;
    text-align: center
}

For the desktop view:

@media (min-width:768px) {

.mastfoot {
    color: #999 !important;
  color: rgba(255, 255, 255, .5) !important;
    position: absolute !important;
    bottom: 10px !important;
    margin-left: 4rem !important;
    margin-right: 10rem !important;
    z-index: 2
}

.inner-mastfoot {
    font-size: 0.8rem;
    text-align: left !important
}

}