container overlap

This bootstrap snippet called "container overlap" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div ui-view="" class="ng-fadeInLeftShort ng-scope" style="">
<div class="container-overlap bg-indigo-500 ng-scope">
  <div class="container container-md">
    <h2>Proin suscipit porta diam id mollis.</h2>
  </div>
</div>
<div class="container container-md ng-scope">
  <div class="card">
    <div class="card-body reader-block">
      <h3>Cras in nisl odio.</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate mauris. Maecenas tincidunt tempus sapien id ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In lacinia tellus vitae nisl consectetur pellentesque. Nulla facilisi. Suspendisse non tortor in quam tincidunt sagittis ac id dui. Mauris eleifend, libero nec cursus lacinia, tellus est pharetra orci, et pretium urna felis eget neque. Pellentesque ut diam velit, eget porttitor risus. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate mauris. Maecenas tincidunt tempus sapien id ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In lacinia tellus vitae nisl consectetur pellentesque. Nulla facilisi. Suspendisse non tortor in quam tincidunt sagittis ac id dui. Mauris eleifend, libero nec cursus lacinia, tellus est pharetra orci, et pretium urna felis eget neque. Pellentesque ut diam velit, eget porttitor risus. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate mauris. Maecenas tincidunt tempus sapien id ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In lacinia tellus vitae nisl consectetur pellentesque. Nulla facilisi. Suspendisse non tortor in quam tincidunt sagittis ac id dui. Mauris eleifend, libero nec cursus lacinia, tellus est pharetra orci, et pretium urna felis eget neque. Pellentesque ut diam velit, eget porttitor risus. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate mauris. Maecenas tincidunt tempus sapien id ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In lacinia tellus vitae nisl consectetur pellentesque. Nulla facilisi. Suspendisse non tortor in quam tincidunt sagittis ac id dui. Mauris eleifend, libero nec cursus lacinia, tellus est pharetra orci, et pretium urna felis eget neque. Pellentesque ut diam velit, eget porttitor risus. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate mauris. Maecenas tincidunt tempus sapien id ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In lacinia tellus vitae nisl consectetur pellentesque. Nulla facilisi. Suspendisse non tortor in quam tincidunt sagittis ac id dui. Mauris eleifend, libero nec cursus lacinia, tellus est pharetra orci, et pretium urna felis eget neque. Pellentesque ut diam velit, eget porttitor risus. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate mauris. Maecenas tincidunt tempus sapien id ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In lacinia tellus vitae nisl consectetur pellentesque. Nulla facilisi. Suspendisse non tortor in quam tincidunt sagittis ac id dui. Mauris eleifend, libero nec cursus lacinia, tellus est pharetra orci, et pretium urna felis eget neque. Pellentesque ut diam velit, eget porttitor risus. </p>
    </div>
  </div>
</div></div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


.container-overlap {
    position: relative;
    padding: 32px 16px 64px
}

.container-overlap+.container-fluid,
.container-overlap+.container-lg,
.container-overlap+.container-md,
.container-overlap+.container-sm,
.container-overlap+.container-xs {
    padding-top: 0;
    margin-top: -32px
}

.container-overlap+.container-fluid .push-down,
.container-overlap+.container-lg .push-down,
.container-overlap+.container-md .push-down,
.container-overlap+.container-sm .push-down,
.container-overlap+.container-xs .push-down {
    display: block;
    height: 48px
}

.container-overlap:before {
    background-color: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

.card .card-body {
    position: relative;
    padding: 16px;
}

@media only screen and (min-width: 992px){
.card {
    margin-bottom: 24px;
}
}
@media only screen and (min-width: 480px) {
.card {
    margin-bottom: 16px;
}
}

.card {
    position: relative;
    border-radius: 3px;
    background-color: #fff;
    color: #4F5256;
    border: 1px solid rgba(0,0,0,.12);
    margin-bottom: 8px;
}

.bg-indigo-500 {
    background-color: #3f51b5;
}

h2 {
    font-size: 45px;
    line-height: 48px;
    margin-top: 24px;
}






                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.7

Created: Mar 11th 2017, 07:19

Views: 113