Twitter Bootstrap Question posted in

What is better approach to creating this kind of exact layout that could stay responsive across several devices as well using twitter bootstrap?

I am using Twitter Bootstrap v3.3.7 framework for the desiging.
I am trying to create a layout just like this attached image.

Reference image

Exact colors need not be necessary but the layout needs to be same along with arrows,markers,content etc. So far what I have tried to is below code:

HTML

<div class="implementation-section-dynamics">
    <div class="abs-box-1">
        <div class="box-content-1 box-content">
            evaluate current business practices to identify which processes
        </div>
        <div class="vline-first vline"></div>
    </div>
    <div class="abs-box-2">
        <div class="box-content-2">
            ERP solution and identify proficiencies and skill gaps
        </div>
        <div class="vline-2"></div>
    </div>
    <div class="abs-box-3">
        <div class="box-content-3">
            Existing data will need to be converted to the new system
        </div>
        <div class="vline-3"></div>
    </div>

    <div class="abs-box-4">
        <div class="box-content-4">
            project team practice with a test database populated
        </div>
        <div class="vline-4"></div>
    </div>

    <div class="abs-box-5">
        <div class="box-content-5">
            System testing post-go-live.
        </div>
        <div class="vline-5"></div>
    </div>

    <img src="img/implementation.svg" alt="" width="60%" class="relative">
</div>

CSS

.abs-box-1 {
    position: absolute;
    bottom: 280px;
    left: 20%;
}
.box-content {
    color: white;
    width: 120px;
}
.vline {
    border-left: 2px dotted white;
    height: 50px;
    position:relative !important;
    width: 10px !important;
    margin-left: 50%;
}
.vline-first {
    left: 26%;
    bottom: -18px;
}
.box-content-1 {
    margin-left: 21%;
    bottom: 50px;
}
.box-content-2 {
    width: 100px;
    color: white;
    position: absolute;
    left: 32%;
    bottom: -110px;
}
.vline-2 {
    border-left: 2px dotted white;
    height: 50px;
    position: absolute !important;
    width: 10px !important;
    margin-left: 36%;
    bottom: 50px;
}


.box-content-3 {
    width: 100px;
    color: white;
    position: absolute;
    left: 44%;
    top: -220px;
}
.vline-3 {
    border-left: 2px dotted white;
    height: 50px;
    position: absolute !important;
    width: 10px !important;
    margin-left: 48%;
    top: -58px;
}

.box-content-4 {
    width: 100px;
    color: white;
    position: absolute;
    left: 54%;
    bottom: -110px;
}
.vline-4 {
    border-left: 2px dotted white;
    height: 50px;
    position: absolute !important;
    width: 10px !important;
    margin-left: 58%;
    bottom: 49px;
}


.box-content-5 {
    width: 100px;
    color: white;
    position: absolute;
    left: 65%;
    top: -167px;
}
.vline-5 {
    border-left: 2px dotted white;
    height: 50px;
    position: absolute !important;
    width: 10px !important;
    left: 69%;
    top: -60px;
}

.implementation-section-dynamics {
    position: relative;
    height: 260px !important;
    margin-bottom: 100px !important;
    margin-top: 250px;
}

With above code, the result I achieved is as below image:
Final Result

The issue is that it doesn’t look accurate and Its not responsive across devices. Not only on mobile but it looks bad even on different size laptops and desktops.

Can anyone please help in this how to achieve this kind of layout in responsive way, with/without twitter bootstrap and I am open to any jquery plugin as well for this, If that helps…

Tags:

3

Answers


  1. 0

    i think you must use bootstrap class in your code for become a responsive

    https://getbootstrap.com/docs/4.1/layout/grid/

    check this and get some idea

    Login or Signup to reply.
  2. 0

    If you need to make it responsive, the usage of the bootstrap 3.3.4 classes for grid layouts are needed. The code example you show, does not use any bootstrap classes, as far as I can tell.

    The first step would be to start with a grid completely based on bootstrap. Then modifying the appearance. So the arrow elements and its labels look like you already did with the .vline- classes together with the bootstrap classes.

    Regarding responsive behavior, you need to define what should happen on smartphones and tablets: should the blocks appear vertical with arrows turning downwards?

    This is not clarified in your question. The suggested approach with bootstrap grid would break the elements vertically, if that is what you intend.

    Login or Signup to reply.
  3. 0

    for the fun and from my comment awaiting feedback, also i won’t be here next days.

    what do you expect as a responsive(fluid?) result when screen is not
    wide enough ? pile them with arrow on top or bottom of each box or
    aside on right or left ? You used lots of absolute where transform
    could help better. Would a flex or grid display be an option (instead
    float from bootstrap3 ). Is clip-path also an option to cut the arrows
    ? etc… 😉 Clarify your question 🙂

    Here is a possible approach via flex & grid and mediaquerie without bs3.

    see if you can do something out of it (that’s partially a fork from another snippet of mine) :

    snippet to run full page, break point set at 860px of width avalaible.

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  width: 80%;
  margin: auto;
  counter-reset: lis -1;
  color: white;
  display: grid;
  grid-auto-rows: 1fr;
  padding-bottom:2em;
}

li {
  flex: 1;
  counter-increment: lis;
  display: flex;
  --bg: #df8f1c;
  position: relative;
}

li:first-of-type,
li:last-of-type {
  justify-content: flex-end;
  align-items: center;
  width: 85%;
}

li:first-of-type:before,
li:first-of-type:after,
li:last-of-type:before,
li:last-of-type:after {
  display: none;
}

li:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 62%;
  width: 100px;
  border-top: dotted
}

li:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 61%;
  height: 3px;
  width: 3px;
  border: solid;
  border-radius: 50%;
  margin-top: -3px;
}

li p {
  text-align: justify;
}

li:nth-child(4n - 2) h3 {
  color: #d2a041
}

li:nth-child(4n) h3 {
  color: #399a91
}

li:nth-child(4n - 3) h3 {
  color: #c73b3c
}

li div.drop-shadow-buffer {
  order: 2;
  width: 25%;
  filter: drop-shadow(1px 0px 1px white) drop-shadow(1px 0px 2px gray);
  position: relative;
  transform:translate(0,-25%);
  
}

div.drop-shadow-buffer:after {
  content: "0" counter(lis);
  position: absolute;
  text-shadow: 1px 1px 1px black;
  height: 180%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5vw;
  font-weight: bold;
  background: radial-gradient( circle at center, transparent 1.5vw, #ffffff08, var(--bg) 1.6vw), linear-gradient(to bottom, white, transparent 3vw, transparent 4vw, white) var(--bg);
  clip-path: polygon(50% 15%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0% 0%);
}

li div {
  width: 50%;
  margin: 1em auto
}


/* ========================================= */

@media screen and (min-width:860px) {
  ul {
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    counter-reset: lis -1;
    color: white;
  }
  li {
    flex-flow: column;
    width: 24%;
    position: relative;
    flex: none;
  }
  li:after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 25%;
    height: 30px;
    border-left: dotted;
    top: auto;
    width: 0;
  }
  li:before {
    content: '';
    position: absolute;
    bottom: -0px;
    top: auto;
    left: 25%;
    height: 3px;
    width: 3px;
    border: solid;
    border-radius: 50%;
    margin-left: -3px;
  }
  li:nth-child(2n + 1):after {
    content: '';
    position: absolute;
    bottom: -auto;
    top: -30px;
    left: 75%;
    height: 30px;
    border-left: dotted
  }
  li:nth-child(2n + 1):before {
    content: '';
    position: absolute;
    bottom: -auto;
    top: 0;
    left: 75%;
    height: 3px;
    width: 3px;
    border: solid;
    border-radius: 50%;
    margin-left: -3px;
  }
  li:nth-child(2n) {
    order: 0;
  }
  li:nth-child(2n + 1) {
    order: 2;
  }
  li:first-of-type,
  li:last-of-type {
    order: 1;
    width: 0;
    padding: 0 80vw 0 0;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 -3em;
  }
  li:last-of-type {
    padding: 0;
    margin: 0;
    transform: translate(4em, 0);
  }
  li div {
    flex: 1;
    margin: 0 auto 0 0;
    min-width: 62.5%;
    text-align: center;
  }
  li h3,
  li p {
    margin: 1em -2.5vw;
    font-size: calc(10px + 1.25vw)
  }
  li p {
    margin: 1em -2.5vw;
    font-size: calc(10px + .5vw)
  }
  li:nth-child(even) div {
    transform: translate(-10%, 0);
  }
  li:nth-child(odd) div {
    transform: translate(71%, 0);
  }
  li div.drop-shadow-buffer {
    order: initial;
  }
  div.drop-shadow-buffer:after {
    content: "0" counter(lis);
    position: absolute;
    text-shadow: 1px 1px 1px black;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.5vw;
    font-weight: bold;
    background: radial-gradient( circle at center, transparent 1.5vw, #ffffff08, var(--bg) 1.6vw), linear-gradient(to bottom, white, transparent 3vw, transparent 4vw, white) var(--bg);
    clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%, 0% 0%);
  }
  li:nth-child(even) div.drop-shadow-buffer:after {
    top: 100%;
    margin-top: 30px;
  }
  li:nth-child(odd) div.drop-shadow-buffer:after {
    bottom: 100%;
    margin-bottom: 30px;
  }
}

body {
  background: #193159
}
    <ul>
  <li>Project Commence</li>
  <li>
    <div>
      <h3>Discovery </h3>
      <p>This slide is 100% editable.<br> Adapt it to your needs and capture your <br> audience's attention</p>
    </div>
    <div class="drop-shadow-buffer"></div>
  </li>
  <li style="--bg:#374659">
    <div class="drop-shadow-buffer"></div>
    <div>
      <h3>High Level design </h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
  </li>
  <li style="--bg:#1fa1af">
    <div>
      <h3>Detail design </h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
    <div class="drop-shadow-buffer"></div>
  </li>
  <li style="--bg:#d03c30">
    <div class="drop-shadow-buffer"></div>
    <div>
      <h3>Develop </h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
  </li>
  <li>
    <div>
      <h3>Testing</h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
    <div class="drop-shadow-buffer"></div>
  </li>
  <li style="--bg:#374659">
    <div class="drop-shadow-buffer"></div>
    <div>
      <h3>Training </h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
  </li>
  <li style="--bg:#1fa1af">
    <div>
      <h3>Deploy </h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
    <div class="drop-shadow-buffer"></div>
  </li>
  <li style="--bg:#d03c30">
    <div class="drop-shadow-buffer"></div>
    <div>
      <h3>Support</h3>
      <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p>
    </div>
  </li>
  <li>Project Complete</li>
</ul>

    codepen to play with : https://codepen.io/gc-nomade/pen/zYreJBQ

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search