Responsive timeline UI with Bootstrap3

Question

How can I create a UI with a vertical timeline bar where on desktop it shows as timeline-bar in middle and event boxes on both sides. On smaller mobile screen, the timeline-bar on the left and all event boxes on the right.

Using JQuery in combination with responsive classes is okay, just need to show all event boxes, so hiding alternate boxes with xs-hidden won't do.

JS Fiddle: http://jsfiddle.net/n82ek/2/

Reduce expand size of result window to see responsive behavior.

What needs to happen? Move the bar left for xs display Nice to have: Also add the timelineDot on line alongside the box.

Please Refer to a sample timeline ui pattern image attached.... and Thank you!

enter image description here

Current HTML:

<div class="container">
    <div class="timelineBar"></div>
    <div class="timelineDot"></div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
</div>

Current CSS:

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
    width: 2px;
    background-color: #BDBDBD;
    display: inline-block;
    position: absolute;
    height: 100%;
    left: 50%;
    margin-left: 10px;
    margin-right: 10px;
}
.shadowBox {
    box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    border:2px solid white;
    border-radius: 10px;
    margin: 10px;
    background-color: #FFFFFF;
}
.timelineDot{
    width: 10px;
    height: 10px;
    background-color: #BDBDBD;
    opacity: 1;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: 6px;
    border-radius: 10px;
}

User · Answer

BootFlat  You can also try BootFlat  which has a section in their documentation specifically for crafting Timelines

User · Answer

x000D   x000D   timeline   x000D    list-style  none  x000D    padding  20px 0 20px  x000D    position  relative  x000D    x000D   x000D   timeline before   x000D    top  0  x000D    bottom  0  x000D    position  absolute  x000D    content       x000D    width  3px  x000D    background-color   eeeeee  x000D    left  50   x000D    margin-left  -1 5px  x000D    x000D   x000D   timeline  gt  li   x000D    margin-bottom  20px  x000D    position  relative  x000D    x000D   x000D   timeline  gt  li before  x000D   timeline  gt  li after   x000D    content       x000D    display  table  x000D    x000D   x000D   timeline  gt  li after   x000D    clear  both  x000D    x000D   x000D   timeline  gt  li before  x000D   timeline  gt  li after   x000D    content       x000D    display  table  x000D    x000D   x000D   timeline  gt  li after   x000D    clear  both  x000D    x000D   x000D   timeline  gt  li  gt   timeline-panel   x000D    width  46   x000D    float  left  x000D    border  1px solid  d4d4d4  x000D    border-radius  2px  x000D    padding  20px  x000D    position  relative  x000D    -webkit-box-shadow  0 1px 6px rgba 0  0  0  0 175   x000D    box-shadow  0 1px 6px rgba 0  0  0  0 175   x000D    x000D   x000D   timeline  gt  li  gt   timeline-panel before   x000D    position  absolute  x000D    top  26px  x000D    right  -15px  x000D    display  inline-block  x000D    border-top  15px solid transparent  x000D    border-left  15px solid  ccc  x000D    border-right  0 solid  ccc  x000D    border-bottom  15px solid transparent  x000D    content       x000D    x000D   x000D   timeline  gt  li  gt   timeline-panel after   x000D    position  absolute  x000D    top  27px  x000D    right  -14px  x000D    display  inline-block  x000D    border-top  14px solid transparent  x000D    border-left  14px solid  fff  x000D    border-right  0 solid  fff  x000D    border-bottom  14px solid transparent  x000D    content       x000D    x000D   x000D   timeline  gt  li  gt   timeline-badge   x000D    color   fff  x000D    width  50px  x000D    height  50px  x000D    line-height  50px  x000D    font-size  1 4em  x000D    text-align  center  x000D    position  absolute  x000D    top  16px  x000D    left  50   x000D    margin-left  -25px  x000D    background-color   999999  x000D    z-index  100  x000D    border-top-right-radius  50   x000D    border-top-left-radius  50   x000D    border-bottom-right-radius  50   x000D    border-bottom-left-radius  50   x000D    x000D   x000D   timeline  gt  li timeline-inverted  gt   timeline-panel   x000D    float  right  x000D    x000D   x000D   timeline  gt  li timeline-inverted  gt   timeline-panel before   x000D    border-left-width  0  x000D    border-right-width  15px  x000D    left  -15px  x000D    right  auto  x000D    x000D   x000D   timeline  gt  li timeline-inverted  gt   timeline-panel after   x000D    border-left-width  0  x000D    border-right-width  14px  x000D    left  -14px  x000D    right  auto  x000D    x000D   x000D   timeline-badge primary   x000D    background-color   2e6da4  important  x000D    x000D   x000D   timeline-badge success   x000D    background-color   3f903f  important  x000D    x000D   x000D   timeline-badge warning   x000D    background-color   f0ad4e  important  x000D    x000D   x000D   timeline-badge danger   x000D    background-color   d9534f  important  x000D    x000D   x000D   timeline-badge info   x000D    background-color   5bc0de  important  x000D    x000D   x000D   timeline-title   x000D    margin-top  0  x000D    color  inherit  x000D    x000D   x000D   timeline-body  gt  p  x000D   timeline-body  gt  ul   x000D    margin-bottom  0  x000D    x000D   x000D   timeline-body  gt  p   p   x000D    margin-top  5px  x000D    x000D   lt div class  container  gt  x000D     lt div class  page-header  gt  x000D       lt h1 id  timeline  gt Timeline lt  h1 gt  x000D     lt  div gt  x000D     lt ul class  timeline  gt  x000D       lt li gt  x000D         lt div class  timeline-badge  gt  lt i class  glyphicon glyphicon-check  gt  lt  i gt  lt  div gt  x000D         lt div class  timeline-panel  gt  x000D            lt p gt  lt small class  text-muted  gt  lt i class  glyphicon glyphicon-time  gt  lt  i gt  11 hours ago via Twitter lt  small gt  lt  p gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D             lt p gt  lt small class  text-muted  gt  lt i class  glyphicon glyphicon-time  gt  lt  i gt  11 hours ago via Twitter lt  small gt  lt  p gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li class  timeline-inverted  gt  x000D         lt div class  timeline-badge warning  gt  lt i class  glyphicon glyphicon-credit-card  gt  lt  i gt  lt  div gt  x000D         lt div class  timeline-panel  gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D             lt p gt Suco de cevadiss     um leite divinis  qui tem lupuliz  matis  aguis e fermentis  Interagi no m    cursus quis  vehicula ac nisi  Aenean vel dui dui  Nullam leo erat  aliquet quis tempus a  posuere ut mi  Ut scelerisque neque et turpis posuere x000D              pulvinar pellentesque nibh ullamcorper  Pharetra in mattis molestie  volutpat elementum justo  Aenean ut ante turpis  Pellentesque laoreet m   vel lectus scelerisque interdum cursus velit auctor  Lorem ipsum dolor sit amet  consectetur adipiscing x000D              elit  Etiam ac mauris lectus  non scelerisque augue  Aenean justo massa  lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li gt  x000D         lt div class  timeline-badge danger  gt  lt i class  glyphicon glyphicon-credit-card  gt  lt  i gt  lt  div gt  x000D         lt div class  timeline-panel  gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li class  timeline-inverted  gt  x000D         lt div class  timeline-panel  gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li gt  x000D         lt div class  timeline-badge info  gt  lt i class  glyphicon glyphicon-floppy-disk  gt  lt  i gt  lt  div gt  x000D         lt div class  timeline-panel  gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D             lt hr gt  x000D             lt div class  btn-group  gt  x000D               lt button type  button  class  btn btn-primary btn-sm dropdown-toggle  data-toggle  dropdown  gt  x000D                 lt i class  glyphicon glyphicon-cog  gt  lt  i gt   lt span class  caret  gt  lt  span gt  x000D               lt  button gt  x000D               lt ul class  dropdown-menu  role  menu  gt  x000D                 lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                 lt li class  divider  gt  lt  li gt  x000D                 lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li gt  x000D         lt div class  timeline-panel  gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li class  timeline-inverted  gt  x000D         lt div class  timeline-badge success  gt  lt i class  glyphicon glyphicon-thumbs-up  gt  lt  i gt  lt  div gt  x000D         lt div class  timeline-panel  gt  x000D           lt div class  timeline-heading  gt  x000D             lt h4 class  timeline-title  gt Mussum ipsum cacilds lt  h4 gt  x000D           lt  div gt  x000D           lt div class  timeline-body  gt  x000D             lt p gt Mussum ipsum cacilds  vidis litro abertis  Consetis adipiscings elitis  Pra l     depois divoltis porris  paradis  Paisis  filhis  espiritis santis  M   faiz elementum girarzis  nisi eros vermeio  in elementis m   pra quem    amistosis quis leo  x000D              Manduma pindureta quium dia nois paga  Sapien in monti palavris qui num significa nadis i pareci latim  Interessantiss quisso pudia ce receita de bolis  mais bolis eu num gostis  lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D    http   codepen io bsngr pen Ifvbi

User · Answer

Timeline  responsive   snippet   This looks very  very close to what your example shows  The bootstrap snippet linked below covers all the bases you are looking for  I ve been considering it myself  with the same requirements you have   especially responsiveness    This morphs well between screen sizes and devices   You can fork this and use it as a great starting point for your specific expectations    http   bootsnipp com snippets featured timeline-responsive     Here are two screenshots I took for you    wide and thin

[responsive-design] Responsive timeline UI with Bootstrap3

The answer is

BootFlat

Examples related to responsive-design

Examples related to twitter-bootstrap-3

Examples related to timeline

Tags