Bootstrap 4 - Interactive horizontal timeline for optimal viewing on all devices

I'm working on creating a responsive horizontal timeline using Bootstrap 4 for my timeline and project. The code I've developed so far is working well in terms of being responsive.

timeline.html

<div className="container timeline-container">
                    <div class="intro">
                        <div class="main-heading">
                            <div class="three-col top">
                                <div class="col">
                                    <div class="sub-heading">
                                        <div class="square">
                                            <div class="pic">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="sub-heading">
                                        <div class="square">
                                            <div class="pic">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="sub-heading">
                                        <div class="square">
                                            <div class="pic">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="main-heading">
                            <div class="three-col bottom">
                                <div className="wrapper-bottom">
                                    <div class="col">
                                        <div class="timeline-dot"> 
                                        </div>
                                        <div class="sub-heading">
                                            <div class="square">
                                                <div class="pic">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col">
                                        <div class="timeline-dot"> 
                                        </div>
                                        <div class="sub-heading">
                                            <div class="square">
                                                <div class="pic">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="timeline-dot"> 
                                        </div>
                                        <div class="sub-heading">
                                            <div class="square">
                                                <div class="pic">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

style.css

.container.timeline-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  * {
    box-sizing: border-box;
  }

  .intro {
    position: relative;
  }

  .square {
    width: 100px;
    height: 100px;
    margin: 25px;
    transform:rotate(45deg);
    overflow: hidden;
  }
  .pic {
    background: url(http://placekitten.com/g/150/150);
    width: 150px;
    height: 150px;
    margin: -25px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 20px;
    margin: 0 auto;
    background: #CF4532;
    margin-top: -6px;
  }

  .main-heading {
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    position: relative;
  }

  .three-col.bottom{
    border-top: 2px solid #4A4A4A;
  }

  .three-col:after {
    display: block;
    clear: both;
    content: '';
  }

  .three-col .col {
    float: left;
    width: 33.33%;
    position: relative;
    padding: 0 20px;
  }

  .sub-heading {
    position: relative;
    display: inline-block;
    padding: 20px 0;

  }

My timeline appears like this:

https://i.sstatic.net/RJ3cF.png

There are two things I want to change:

1) Remove the lines before the first and after the last dot so the timeline looks like this https://i.sstatic.net/L8z8V.png

2) Make the picture squares responsive.

I tried adjusting the parent div like this

.sub-heading {
    position: relative;
    display: inline-block;
    padding: 20px 0;
    width: 400px;
    height: 400px;   
}

And for the picture square:

.square {
    width: 100%;
    height: 100%;
    margin: 25px;
    transform:rotate(45deg);
    overflow: hidden;
 }

But it's not working as expected. Any advice would be greatly appreciated.

cssbootstrap-4timeline

Answer №1

1) Achieve the desired result using CSS by utilizing the ::after pseudo-class on each column. Adjust the styling by removing the top border from the .three-col.bottom class and adding a border to every .col element in the top row using ::after.

Here is an example of the CSS:

.three-col.top .col::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid #4A4A4A;
}

.three-col.top .col:first-child::after {
  left: 50%;
}

.three-col.top .col:last-child::after {
  right: 50%;
}

2) Eliminate the square div element as it is not necessary. Modify the styling for the .pic class as follows:

.pic {
  background: url(http://placekitten.com/g/150/150);
  width: 60px;
  height: 60px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 25px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

For responsive design, incorporate CSS media queries:

https://www.w3schools.com/css/css3_mediaqueries.asp.

Consider the following approach:

@media (min-width: 800px) {
  .pic {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 1024px) {
  .pic {
    width: 200px;
    height: 200px;
  }
}

@media (min-width: 1200px) {
  .pic {
    width: 250px;
    height: 250px;
  }
}

Complete Code:

.container.timeline-container{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    * {
      box-sizing: border-box;
    }

    .intro {
      position: relative;
    }

    .square {
      width: 100px;
      height: 100px;
      margin: 25px;
      transform:rotate(45deg);
      overflow: hidden;
    }
    .pic {
      background: url(http://placekitten.com/g/150/150);
      width: 60px;
      height: 60px;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      margin: 25px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .timeline-dot {
      width: 10px;
      height: 10px;
      border-radius: 20px;
      margin: 0 auto;
      background: #CF4532;
      margin-top: -6px;
    }

    .main-heading {
      text-align: center;
      font-size: 30px;
      line-height: 30px;
      position: relative;
    }

    .three-col:after {
      display: block;
      clear: both;
      content: '';
    }

    .three-col .col {
      float: left;
      width: 33.33%;
      position: relative;
      padding: 0 20px;
    }

    .sub-heading {
      position: relative;
      display: inline-block;
      padding: 35px 0;

    }

    .three-col.top .col::after {
      content: "";
      position: absolute;
      background: #000;
      display: block;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 2px solid #4A4A4A;
    }

    .th... 

<div className="container timeline-container">
    <div class="intro">
      <div class="main-heading">
        <div class="three-col top">
          <div class="col">
            <div class="sub-heading">
              <div class="pic">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="sub-heading">
              <div class="pic">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="sub-heading">
              <div class="pic">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-heading">
        <div class="three-col bottom">
          <div className="wrapper-bottom">
            <div class="col">
              <div class="timeline-dot">
              </div>
              <div class="sub-heading">
                <div class="pic">
                </div>
              </div>
            </div>

            <div class="col">
              <div class="timeline-dot">
              </div>
              <div class="sub-heading">
                <div class="pic">
                </div>
              </div>
            </div>
            <div class="col">
              <div class="timeline-dot">
              </div>
              <div class="sub-heading">
                <div class="pic">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

javascriptjqueryhtmlcsslaravel-5

javascript strange behavior

I am facing an issue with my code that is attempting to display images based on their height. Strangely, the code seems to work fine when I test it with 2 images, but fails when trying with 3 or more. Check out the site: Upon clicking a menu button, the ...

javascriptcssposition

Title vanishes when gradient is added to a div

I have encountered an issue with a recent update on my webpage. Previously, I had multiple divs with the title attribute that displayed information when users hovered over them. However, after adding a gradient background, the titles stopped appearing. Th ...

htmlcssinternet-explorer

trouble with padding on cards using vue-bootstrap

I have been working on creating a card component with Vue Bootstrap, but I've run into an issue. The card header and body seem to have excessive padding around them. If I remove the b-card element and only use b-card-header and b-card-body, it looks l ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Highcharts 3D Pie Chart with Drilldown Feature

How can I create a 3D Pie Chart with Drilldown effect? I am having trouble understanding how it works. Here is a JsFiddle Demo for a 3D Pie Chart: JsFiddle Demo And here is a JsFiddle Demo for a 2D Pie Chart with Drilldown feature: JsFiddle Demo You can ...

javascriptjquerycsschartshighcharts

Troubleshooting on Safari for iOS

As I work on my portfolio website using only HTML 5 without any JavaScript, I encountered an issue with the about page not functioning properly on iPhones. There seems to be a problem with scrolling as some elements are fixed and do not move along with t ...

htmlioscssdebuggingsafari

Google Map with rounded corners that have a transparent design

Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet: <div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&g ...

cssgoogle-maps-api-3

"Trouble with Express.js: CSS isn't loading, yet HTML displays

Click here to view folders and files server.js is the code I have created so far //importing packages const express = require('express'); const admin = require('firebase-admin'); const bcrypt = require('bcrypt'); const path = ...

javascripthtmlcssexpressnpm

Adjust the position of the select box slightly downwards to ensure it lines up with the preceding text in the HTML code

I am working on an HTML5 webpage and I am facing an alignment issue with the selection box. The selection box is currently not aligned with the text ("Select Discipline") that comes before it. I am looking for a way to adjust the position of the selectio ...

htmlcss

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

cssangularjsng-class

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

javascriptcsswebpacksassbabeljs

Is there a way to eliminate the space between the content inside a table cell and its borders?

I am struggling with a table setup that includes three columns and multiple rows. The first column contains an image, causing the cells in that row to resize based on the image size. When text is added to the 2nd and 3rd columns, it automatically centers w ...

htmlcss

What is the best way to make a Modal triggered by a loop embedded within a table function properly on mobile devices?

While the modal is functioning properly on desktop, it seems to be encountering issues on mobile devices. The modal appears behind the background and is confined by the boundaries of the table (tbody). Below is the code snippet for triggering the modal: ...

javascriptphpbootstrap-4

CSS: concealing certain portions of an element's content

I don't have control over the following markup: <p class="filename"> <img src="http://domain.com/uploads/image_gallery/_thumbs/Chrysanthemum.jpg" alt="Chrysanthemum.jpg"> <br> Chrysanthemum.jpg </p> Is it possible ...

css

jQuery sidebar with a fixed position

Is there a way to implement a sidebar menu feature using jQuery that reappears on the left as the user scrolls down the page? You can see an example sidebar menu here. ...

javascriptjqueryhtmlcss

A step-by-step guide to customizing MUI CSS within a React component that incorporates MUI elements

Here is a custom Reactjs component I created and used in various components: function CustomSearchBox({ handle, placeholder, inputType, ...props}) { return ( <Box sx={{ display: 'flex', ali ...

htmlcssreactjsmaterial-ui

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

Exploring the use of display: flex and order:, I noticed a curious behavior. When I set the order for my first div to 0 (order: 0;), it appears at the top of the page. However, as I add more divs with different orders, they initially show up in unexpected ...

htmlcssflexbox

Setting the flex-direction for <td> elements: A helpful guide

This is a snippet from the render function of one of my components, showcasing a table: return ( ... <td> <div style={{ width: '100%' }}>50</div> {' '} <span clas ...

htmlreactjscssflexbox

What strategies can be used to accurately position a rotated image within a rotated div?

Below is the code snippet I am using: <div class="container"> <img class="img"/> <div class="underlay"></div> </div> The image is a picture of some rotated text by 10 degrees, although the ...

htmlcss