Bootstrap Carousel Full Screen

Question

I am trying to get the image in the bootstrap carousel to show full screen but haven t been able to figure it out  I ve been working on this for awhile and am totally stuck   Right now I have just one image  but I will add more once it works      lt  DOCTYPE html gt    lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt title gt Carousel Template  amp middot  Bootstrap lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt meta name  description  content    gt       lt meta name  author  content    gt        lt  -- Le styles -- gt       lt link href     assets css bootstrap css  rel  stylesheet  gt       lt link href     assets css bootstrap-responsive css  rel  stylesheet  gt       lt style gt          GLOBAL STYLES     --------------------------------------------------           Padding below the footer and lighter body text         body         color   5a5a5a        height  100         width  100         min-height  100                   CUSTOMIZE THE NAVBAR     --------------------------------------------------            Special class on  container surrounding  navbar  used for positioning it into place          navbar-wrapper         position  absolute        top  0        left  0        right  0        z-index  10        margin-top  20px             navbar-wrapper  navbar                  Remove border and change up box shadow for more contrast         navbar  navbar-inner         border  0        -webkit-box-shadow  0 2px 10px rgba 0 0 0  25            -moz-box-shadow  0 2px 10px rgba 0 0 0  25                 box-shadow  0 2px 10px rgba 0 0 0  25                 Downsize the brand project name a bit         navbar  brand         padding  14px 20px 16px     Increase vertical padding to match navbar links          font-size  16px        font-weight  bold        text-shadow  0 -1px 0 rgba 0 0 0  5                 Navbar links  increase padding for taller navbar         navbar  nav  gt  li  gt  a         padding  15px 20px                Offset the responsive button for proper vertical alignment         navbar  btn-navbar         margin-top  10px                  CUSTOMIZE THE CAROUSEL     --------------------------------------------------            Carousel base class         carousel         margin-bottom  0px              carousel  container         position  relative        z-index  9              carousel  item         height  100               carousel-inner         overflow hidden        width  100         min-height  100         position relative              carousel img         position  absolute        top  0        left  0        min-width  100         min-height  100               carousel-caption         background-color  transparent        position  static        max-width  550px        padding  0 20px        margin-top  200px             carousel-caption h1       carousel-caption  lead         margin  0        line-height  1 25        color   fff        text-shadow  0 1px 1px rgba 0 0 0  4              carousel-caption  btn         margin-top  10px                 RESPONSIVE CSS     --------------------------------------------------          media  max-width  979px            container navbar-wrapper           margin-bottom  0          width  auto                 navbar-inner           border-radius  0          margin  -20px 0                  carousel img           width  auto          height  500px                  featurette           height  auto          padding  0                 featurette-image pull-left         featurette-image pull-right           display  block          float  none          max-width  40           margin  0 auto 20px                       media  max-width  767px            navbar-inner           margin  -20px                  carousel           margin-left  -20px          margin-right  -20px                 carousel img           height  300px                 carousel-caption           width  65           padding  0 70px          margin-top  100px                 carousel-caption h1           font-size  30px                 carousel-caption  lead         carousel-caption  btn           font-size  18px                  marketing  span4    span4           margin-top  40px                  featurette-heading           font-size  30px                 featurette  lead           font-size  18px          line-height  1 5                      lt  style gt        lt  -- HTML5 shim  for IE6-8 support of HTML5 elements -- gt       lt  -- if lt IE 9  gt         lt script src     assets js html5shiv js  gt  lt  script gt       lt   endif -- gt        lt  -- Fav and touch icons -- gt       lt link rel  apple-touch-icon-precomposed  sizes  144x144  href     assets ico apple-touch-icon-144-precomposed png  gt       lt link rel  apple-touch-icon-precomposed  sizes  114x114  href     assets ico apple-touch-icon-114-precomposed png  gt         lt link rel  apple-touch-icon-precomposed  sizes  72x72  href     assets ico apple-touch-icon-72-precomposed png  gt                       lt link rel  apple-touch-icon-precomposed  href     assets ico apple-touch-icon-57-precomposed png  gt                                      lt link rel  shortcut icon  href     assets ico favicon png  gt     lt  head gt      lt body gt          lt  -- NAVBAR                                                        -- gt       lt div class  navbar-wrapper  gt         lt  -- Wrap the  navbar in  container to center it within the absolutely positioned parent  -- gt         lt div class  container  gt            lt div class  navbar navbar-inverse  gt             lt div class  navbar-inner  gt               lt  -- Responsive Navbar Part 1  Button for triggering responsive navbar  not covered in tutorial   Include responsive CSS to utilize  -- gt               lt button type  button  class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt                 lt span class  icon-bar  gt  lt  span gt                 lt span class  icon-bar  gt  lt  span gt                 lt span class  icon-bar  gt  lt  span gt               lt  button gt               lt a class  brand  href     gt Treyca lt  a gt               lt  -- Responsive Navbar Part 2  Place all navbar contents you want collapsed withing  navbar-collapse collapse  -- gt               lt div class  nav-collapse collapse  gt                 lt ul class  nav  gt                   lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                   lt li gt  lt a href   about  gt About lt  a gt  lt  li gt                   lt li gt  lt a href  fluid html  gt Beta lt  a gt  lt  li gt                   lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt                   lt  -- Read about Bootstrap dropdowns at http   twitter github com bootstrap javascript html dropdowns -- gt                   lt li class  dropdown  gt                     lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                     lt ul class  dropdown-menu  gt                       lt li gt  lt a href     gt Action lt  a gt  lt  li gt                       lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                       lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                       lt li class  divider  gt  lt  li gt                       lt li class  nav-header  gt Nav header lt  li gt                       lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                       lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt                     lt  ul gt                   lt  li gt                 lt  ul gt               lt  div gt  lt  --  nav-collapse -- gt             lt  div gt  lt  --   navbar-inner -- gt           lt  div gt  lt  --   navbar -- gt          lt  div gt   lt  --   container -- gt       lt  div gt  lt  --   navbar-wrapper -- gt          lt  -- Carousel                                                        -- gt       lt div id  myCarousel  class  carousel slide  gt         lt div class  carousel-inner  gt           lt div class  item active  gt             lt img src     assets img examples Bar-1 jpg  alt    gt             lt div class  container  gt               lt div class  carousel-caption  gt                 lt h1 gt Example headline  lt  h1 gt                 lt p class  lead  gt Cras justo odio  dapibus ac facilisis in  egestas eget quam  Donec id elit non mi porta gravida at eget metus  Nullam id dolor id nibh ultricies vehicula ut id elit  lt  p gt                 lt a class  btn btn-large btn-primary  href     gt Sign up today lt  a gt               lt  div gt             lt  div gt           lt  div gt         lt  div gt         lt  -- FOOTER -- gt         lt footer gt           lt p gt  amp copy  2013 Company  Inc   amp middot   lt a href     gt Privacy lt  a gt   amp middot   lt a href     gt Terms lt  a gt  lt  p gt         lt  footer gt       lt  div gt  lt  --   carousel -- gt        lt  -- Le javascript                                                        -- gt       lt  -- Placed at the end of the document so the pages load faster -- gt       lt script src     assets js jquery js  gt  lt  script gt       lt script src     assets js bootstrap-transition js  gt  lt  script gt       lt script src     assets js bootstrap-alert js  gt  lt  script gt       lt script src     assets js bootstrap-modal js  gt  lt  script gt       lt script src     assets js bootstrap-dropdown js  gt  lt  script gt       lt script src     assets js bootstrap-scrollspy js  gt  lt  script gt       lt script src     assets js bootstrap-tab js  gt  lt  script gt       lt script src     assets js bootstrap-tooltip js  gt  lt  script gt       lt script src     assets js bootstrap-popover js  gt  lt  script gt       lt script src     assets js bootstrap-button js  gt  lt  script gt       lt script src     assets js bootstrap-collapse js  gt  lt  script gt       lt script src     assets js bootstrap-carousel js  gt  lt  script gt       lt script src     assets js bootstrap-typeahead js  gt  lt  script gt       lt script gt         function                 function                 carousel demo               myCarousel   carousel                      window jQuery       lt  script gt       lt script src     assets js holder holder js  gt  lt  script gt        lt style gt          body                   background-color  black                  color   FFFFFF                     lt  style gt     lt  body gt   lt  html gt

User · Answer

You can do it without forcing html and body to me 100  height  Use view port height instead  And with mouse wheel control too    x000D   x000D  function debounce func  wait  immediate    x000D    var timeout  x000D    return function     x000D      var context   this  x000D        args   arguments  x000D      var later   function     x000D        timeout   null  x000D        if   immediate  func apply context  args   x000D         x000D      var callNow   immediate  amp  amp   timeout  x000D      clearTimeout timeout   x000D      timeout   setTimeout later  wait   x000D      if  callNow  func apply context  args   x000D       x000D    x000D   x000D  var slider   document getElementById  demo    x000D  var onScroll   debounce function direction    x000D      console log direction   x000D    if  direction    false    x000D         carousel-control-next   click    x000D      else   x000D         carousel-control-prev   click    x000D      x000D     100  true   x000D   x000D  slider addEventListener  wheel   function e    x000D    e preventDefault    x000D    var delta  x000D    if  event wheelDelta    x000D      delta   event wheelDelta  x000D      else   x000D      delta   -1   event deltaY  x000D      x000D   x000D    onScroll delta  gt   0   x000D      x000D   carousel-item   x000D    height  100vh  x000D    background   212121  x000D    x000D   x000D   carousel-control-next  x000D   carousel-control-prev   x000D    width  8   important  x000D    x000D   x000D   carousel-item active  x000D   carousel-item-left  x000D   carousel-item-right   x000D    display  flex  important  x000D    justify-content  center  x000D    align-items  center  x000D    x000D   x000D   carousel-item h1   x000D      color   fff  x000D      font-size  72px  x000D      padding  0 10   x000D     x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 1 0 css bootstrap min css  rel  stylesheet    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 1 0 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt div id  demo  class  carousel slide  data-ride  carousel  data-interval  false  gt  x000D   x000D     lt  -- The slideshow -- gt  x000D     lt div class  carousel-inner  gt  x000D       lt div class  carousel-item active  gt  x000D         lt h1 class  display-1 text-center  gt Lorem ipsum dolor sit amet adipisicing lt  h1 gt  x000D       lt  div gt  x000D       lt div class  carousel-item  gt  x000D         lt h1 class  display-1 text-center  gt Inventore omnis odio  dolore culpa atque  lt  h1 gt  x000D       lt  div gt  x000D       lt div class  carousel-item  gt  x000D        lt h1 class  display-1 text-center  gt Lorem ipsum dolor sit lt  h1 gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt  -- Left and right controls -- gt  x000D     lt a class  carousel-control-prev  href   demo  data-slide  prev  gt  x000D       lt span class  carousel-control-prev-icon  gt  lt  span gt  x000D     lt  a gt  x000D     lt a class  carousel-control-next  href   demo  data-slide  next  gt  x000D       lt span class  carousel-control-next-icon  gt  lt  span gt  x000D     lt  a gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Update Bootstrap 4   Bootstrap 4 has utility classes that make it easier to create a full screen carousel  For example  use the min-vh-100 class on the carousel-item content      lt div class  carousel slide  data-ride  carousel  gt         lt div class  carousel-inner bg-info  role  listbox  gt               lt div class  carousel-item active  gt                   lt div class  d-flex align-items-center justify-content-center min-vh-100  gt                       lt h1 class  display-1  gt ONE lt  h1 gt                   lt  div gt               lt  div gt         lt  div gt   lt  div gt    Full screen carousel demo  This works to make the carousel items full screen  but carousel items that contain images or videos that have a specific size  amp  aspect ratio require further consideration   Since the viewport h w ratio is likely to be different than the image or video h w ratio  usually background images or object-fit are commonly used to size images and videos to  full screen   For videos  use the Bootstrap responsive embed classes as needed for the video ratio  21 9  19 9  etc       Full screen videos demo  Also see  https   stackoverflow com a 58765043 171456    Original answer  Bootstrap 3   Make sure the img inside the carousel item is set to height and width 100   You also have to make sure the carousel and any of the  item containers  html body  are 100      html body height 100     carousel  item  active height 100     carousel-inner height 100      Boostrap 3 Full Screen Carousel Demo  Here s an example for Bootstrap 3 x  http   www codeply com go 2tVXo3mAtV

User · Answer

This is how I did it  This makes the images in the slideshow take up the full screen if it  s aspect ratio allows it  othervice it scales down    carousel       height  100vh      width  100       overflow hidden     carousel  carousel-inner       height 100           To allways get a full screen slideshow  no matter screen aspect ratio  you can also use object-fit    doesn  t work in IE or Edge    carousel  carousel-inner img       display block      object-fit  cover

User · Answer

Simply Add  carousel-item  class in place of item class

User · Answer

I found an answer on the startbootstrap com  Try this code   CSS  html  body       height  100       carousel   item   active       height  100        carousel-inner       height  100         Background images are set within the HTML using inline CSS  not here      fill       width  100       height  100       background-position  center      -webkit-background-size  cover      -moz-background-size  cover      background-size  cover      -o-background-size  cover     footer       margin  50px 0      HTML      lt div class  carousel-inner  gt           lt div class  item active  gt               lt  -- Set the first background image using inline CSS below  -- gt               lt div class  fill  style  background-image url  http   placehold it 1900x1080 amp text Slide One     gt  lt  div gt               lt div class  carousel-caption  gt                   lt h2 gt Caption 1 lt  h2 gt               lt  div gt           lt  div gt           lt div class  item  gt               lt  -- Set the second background image using inline CSS below  -- gt               lt div class  fill  style  background-image url  http   placehold it 1900x1080 amp text Slide Two     gt  lt  div gt               lt div class  carousel-caption  gt                   lt h2 gt Caption 2 lt  h2 gt               lt  div gt           lt  div gt           lt div class  item  gt               lt  -- Set the third background image using inline CSS below  -- gt               lt div class  fill  style  background-image url  http   placehold it 1900x1080 amp text Slide Three     gt  lt  div gt               lt div class  carousel-caption  gt                   lt h2 gt Caption 3 lt  h2 gt               lt  div gt           lt  div gt       lt  div gt    Source

User · Answer

I m had the same problem  and I tried with the answers above  but I wanted something more thin  then I tried to change one by one opsions  and discover that we just need to add   carousel     height  100

[twitter-bootstrap] Bootstrap Carousel Full Screen

Examples related to twitter-bootstrap

Examples related to carousel