Bootply

Bootstrap Editor use requires a larger screen resolution. Resize your browser, or use a device with a larger screen (desktop or laptop). You can preview at smaller widths (phone / tablet), but the editing capability is disabled.

Switch to render view

javascript

css

/* universal */
body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  justify-content: center;
  background-color: #f5f5f5;
}

section {
  overflow: auto;
}

#search {
    height: 50px;
}
#search-label {
    margin-bottom: -50px;
    padding-left: 5px;
    padding-top: 2px;
    position: absolute;
    color: #ccc;
}
#input {
    height: 100%;
    padding-bottom: -10px;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}
/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #000;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #777;
  text-decoration: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* equal card height */
.row-equal > div[class*='col-'] {
    display: flex;
    flex: 1 0 auto;
}

.row-equal .card {
   width: 100%;
}

/* ensure equal card height inside carousel */
.carousel-inner>.row-equal.active, 
.carousel-inner>.row-equal.next, 
.carousel-inner>.row-equal.prev {
    display: flex;
}

/* prevent flicker during transition */
.carousel-inner>.row-equal.active.left, 
.carousel-inner>.row-equal.active.right {
    opacity: 0.5;
    display: flex;
}

.carousel-item {
    height: 350px;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.carousel-indicators {
    bottom: -50px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* control image height */
.card-img-top-250 {
    max-height: 250px;
    overflow:hidden;
}

html

container

row

8.3%

12.5%

25%

33%

41.6%

50%

58.3%

66%

75%

83.3%

91.6%

100%

Hero

well

<form>

h1

h2

h3

h4

small

icon

table

<hr>

label

badge

[media]

"Lorem ipsum.."

complex page sticky header and footer with tabs and carousels
0	369 Bootstrap v4.1.0 Related snippets
tabs footer navs carousel
Created by: lawrencesproul

id
style
class

Bootply

complex page

sticky header and footer with tabs and carousels

Bootply v1.2.1 An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

Starter Template

Details

Sticky footer with fixed navbar

Bootstrap 4 Card Slider

Insight

Development

Design

Another

12.04 Category 1

Category 3

Bootstrap 4 Card Slider

Insight

Development

Design

Another

12.04 Category 1

Category 3

Bootstrap 4 Card Slider

Insight

Development

Design

Another

12.04 Category 1

Category 3

Do you want to proceed?

Password Lookup

Would you like to upgrade?

$9/mo

Contact Us

Do you want to proceed?

Password Lookup

Would you like to upgrade?

$9/mo

Contact Us

Bootply v1.2.1
An unofficial Bootstrap playground.