Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Test"
Bootstrap 3.3.0 Snippet by
sparkktv
3.3.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.1K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section data-m-id="2227653" data-m-name="key_information_box" data-m-type="freetext" class="module m-freetext m-key-information-box legacy " data-is-legacy="1"> <div class="header module-row"> <div class="show-logo-image"> <a href="/shows/greys-anatomy" class="back-arrow"> <i class="fa fa-chevron-left fa-2x"></i></a> <a href="/shows/greys-anatomy"> <img class=" lazyloaded" data-src="https://cdn1.edgedatg.com/aws/v2/abc/GreysAnatomy/showimages/1123332428aa36966d0d5dcdf5239baf/350x117-Q80_1123332428aa36966d0d5dcdf5239baf.png" src="https://cdn1.edgedatg.com/aws/v2/abc/GreysAnatomy/showimages/1123332428aa36966d0d5dcdf5239baf/350x117-Q80_1123332428aa36966d0d5dcdf5239baf.png" data-fallback-text="" alt="Grey's Anatomy"> </a></div> <div class="buttons m-favoritelistbutton state-not-in-list" data-show-id="SH559058"> <button class="button list-action remove-from-my-list"> <i class="icon abc-icon-check"></i><span>My List</span></button> <button class="button list-action add-to-list"> <i class="fa fa-plus fa-2x"></i><span>MY LIST</span></button> <a href="/shows/greys-anatomy/about-the-show" class="about-the-show button " data-m-name="key_information_box"> <i class="fa fa-info fa-2x"></i><span>ABOUT</span></a></div></div></section> <div class="columns with-right-button"> <h2 class="module-title text2 " data-qa="module.tilegroup.title">season 15</h2> <span class="see-all right-button" data-qa="module.tilegroup.see-all"> <a href="/shows/greys-anatomy/episode-guide/season-15">See All</a></span></div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .m-key-information-box.non-home, .m-key-information-box.legacy {background-color: rgb(21, 44, 73);} .m-key-information-box.legacy {position:relative;padding: 0 .4375rem;} .m-key-information-box.legacy {position:fixed;top: 0;width: 100%;max-width: 100%;z-index: 10;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);} .m-key-information-box {background:none;margin:0 auto;} .m-key-information-box.legacy::before {content: '';width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;z-index: -1;} .m-key-information-box:not(.sticky).legacy .header {box-shadow: none;} .m-key-information-box.legacy .header {max-width: 62.5rem;padding-left: 0;padding-right: 0;} .m-key-information-box.legacy .header {flex-direction: row;background: none;height: 4.5rem;margin: 0 auto;} .m-key-information-box .header {position: relative;display: flex;color: #fff;} .m-key-information-box.legacy .header .show-logo-image {display: flex;flex: 1;} .m-key-information-box .header .show-logo-image {align-items: center;justify-content: start;} .m-key-information-box.legacy .header .show-logo-image a.back-arrow{min-width: inherit;} .m-key-information-box a.back-arrow{display: inline-block;font-size: 1.5rem;padding-right: .625rem;} .m-key-information-box a.back-arrow i{cursor: pointer;} .m-key-information-box.legacy .header .show-logo-image a {min-width: 10rem;} .m-key-information-box .header .show-logo-image img {max-height: 2.875rem;} .m-key-information-box.legacy .header .buttons {display: flex;padding-top: 0;} .m-key-information-box .header .buttons {justify-content: center;align-items: center;font-size: .5625rem;font-weight: 200;letter-spacing: .0375rem;} .m-key-information-box .header .buttons.state-not-in-list .remove-from-my-list {display: none;visibility: hidden;} .m-key-information-box .header .buttons .button {flex-direction: column;align-items: center;background: none;color: #fff;font-size: .5625rem;padding: 0;width: auto !important;min-width: auto;border-radius: 0;height: 100%;justify-content: center;} .m-favoritelistbutton button.list-action {line-height: 2.1875rem;border: none;} button.button{min-height:2.75rem;text-transform:uppercase;font-weight:300;transition: background 400ms ease-in 0s,border 200ms ease-in 0s,color 200ms ease-in 0s;} .m-key-information-box.legacy .header .buttons .button > span {display: none;} .m-key-information-box .header .buttons .button span {height: 1rem;margin-top: .3125rem;line-height: 1rem;font-weight: 300;} .m-key-information-box .header .buttons .button span {font-size: .5625rem;justify-content: center;align-items: center;padding: .625rem;} .m-key-information-box .header .buttons .button .fa {width: 2.5rem;height: 2.5rem;display: flex;align-items: center;justify-content: center;font-size: 1rem;border-radius: 50%;transition: background-color .3s;} .m-favoritelistbutton .button .fa {background-color: rgb(72, 103, 147);} .m-key-information-box .header .buttons.state-not-in-list .add-to-list {display: flex;visibility: visible;} .m-key-information-box.legacy .header .buttons .button:last-child {margin: 0 0 0 .5rem;} /* MODULE TITLE */ .with-right-button .module-title {float: left;} .module-title {font-size:1.25rem;letter-spacing:5px;font-weight:200px;white-space:normal;margin-top:1.25rem;margin-bottom:.9375rem;text-transform:uppercase;} .text2 {display:block;text-rendering:optimizeLegibility;line-height: 1.4;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;} .with-right-button .right-button {float: right;margin-top: 1.25rem;} .with-right-button .right-button a {font-size: 1rem;font-weight: 200;text-transform: capitalize;letter-spacing: 1px;}
Related:
See More
Free Template
Hipster As F*** Cards
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76