Incorporate a center line into the Bootstrap grid without disrupting any of the current layouts

I am attempting to achieve a similar effect to the one displayed here, with a white line and circles running down the center of a single-page layout, using bootstrap 3.

My initial thought was to have a column with a right border spanning the entire layout using md-col-6. However, this layout would not accommodate my content, such as a centered image element. Is there a way to create this effect responsively without disrupting my current bootstrap grid layout? It would be ideal to find a generic method for achieving this, possibly by overlaying another grid (if feasible). If not, below is a snippet of my existing layout:

<div class="container fullheight" >
  <div class="row text-center">
    <div class="col-sm-12">
      <h2>Title</h2>
      <h3 style="font-size:46px;">2012</h3>
    </div>
  </div>
  <div class="row width90">
    <div class="col-sm-5 col-md-7"></div>
    <div class="col-sm-7 col-md-5 right-fact">
      <h3>Tile</h3>
      <p>Description</p>
    </div>
  </div>
  <div class="row text-center"> <img src="Images/Image1.svg" alt="Image" height="450px"> </div>
  <div class="row width90">
    <div class="col-sm-7 col-md-5 left-fact">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
</div>
<!-- Repeat these sections to create a one-page website effect -->
htmlcsstwitter-bootstrap

Answer №1

Here is the code snippet for a stylish line and circle design:

.middle-line {
  position: fixed;
  height: calc(80vh - 28px); 
  bottom: 0;
  width: 1px;
  left: 50%;
  
  background-color: black;
}
.middle-line:before {
  border: 5px solid black;
  
  width: 18px;
  height: 18px;

  display: block;
  content: '';
  bottom: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
}
<div class="middle-line"></div>

If you want to customize the colors, feel free to replace the instances of black in the CSS with your desired color values. You can also adjust the size of the circle and border width as needed until you achieve the look you desire.

Remember to include this code snippet within the html of your webpage. It may be small, but it plays an important role in the overall design. Place it inside the <body> tag, preferably as a direct child element.

Enjoy designing!

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

Encase every picture within a div and add a numerical label in front of it

I'm working on a function that will wrap each image in a div and add a span label for each image. Here is the code I have written so far: $('#carousel img').each(function(index) { $(this).wrap('<div class="image"></div>& ...

jqueryhtmlimage

Automatically create CSS properties for left and top using absolute positioning

When looking at these websites as models: On each of them, I noticed that there is a well-organized column of boxes for every post. I attempted to recreate this using various methods, but couldn't achieve the exact layout on my own website. It seems ...

javascriptjqueryhtmlcss

Use Angular to change the style of multiple element groups at the same time when hovering

When hovering over an element with a common attribute, such as a class name, I want to change the style of all elements that share that attribute. Achieving this effect is simple with jQuery: $(function() { $('.bookId4').hover( function(){ ...

javascriptcssangularjshover

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

cssreactjstypescriptjss

Utilize jQuery to export HTML or JSON data to an Excel spreadsheet

I am looking for a way to export json or html data to an excel sheet using only html and jquery, without involving any server code. I have found some fiddles that allow me to download the excel sheet successfully, but unfortunately, none of them work in In ...

javascriptjqueryhtmlexcel

Aligning two floating elements vertically in respect to each other

Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research. I attempted to create a basic header element for a website that includes an h1 title and a navi ...

htmlcssvertical-alignment

use jQuery to retrieve the value of an attribute

I am having trouble extracting the value of the name attribute from this HTML code: <select id='id_select'> <option name='nm_opt' value='23'>Val1</option> <option name='nm_opt2' value='16 ...

jqueryhtmlappendattr

Adjust the appearance of a glyphicon by modifying its color according to various criteria

Using angularjs, I implemented ng-repeat to display details in a table. In the final column, I aim to display the glyphicon 'glyphicon glyphicon-stop' in a specific color. <tr ng-repeat="ps in $ctrl.personLst"> <td>{{ ps.id}}</td& ...

cssangularjs

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

Tips for merging two text boxes in a form with CSS

Is it possible to combine two text boxes in a form using CSS, similar to the design on Tumblr's login page at ? If CSS is not the solution, what alternative methods can be used? Any assistance would be greatly appreciated. I am aiming to enhance the ...

htmlcssformsinputtextinput

Increased space between the sidebar and the top bar

Currently, my code is a bit messy as I am still in the learning stages of bootstrap. I need some assistance on how to resolve the empty space that exists between the top and side bar elements. <!DOCTYPE html> <html lang="en"> <sty ...

htmlcsstwitter-bootstrap

What is the best way to incorporate a PHP file into an HTML file?

Below is the code snippet from my index.php: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Voting Page</title> <script type="text/javascript" src="js/jquer ...

javascriptphpjqueryhtml

Showing a text value from a Github Gist on a Hugo website

I seem to be struggling with a seemingly simple task and I can't figure out what I'm missing. Any assistance would be greatly appreciated. I am working on generating a static site using Hugo. On one of my pages, I want to implement a progress ba ...

javascripthtmlhugogist

What is the process for converting HTML to RTF using Java programming language?

When working with the basic API of JAVA using RTFEditorKit and HTMLEditorKit, I encountered a limitation where certain tags like <br/> and <table> were not recognized. In my search for better solutions to convert HTML to RTF, I came across two ...

javahtmlrtf

Scaling problem faced on iOS devices with HTML5 canvas

I've been working on a project using phonegap, trying to develop it for both Android and iOS. The main goal is to select a saved image from the phone library, display that image on an HTML img element, and then draw that img onto a canvas. Users shoul ...

ioshtmlcanvascordovascaling

Display of Navigation Bar in Angular is Not Proper

Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image: https://i.stack.imgur.com/z70Aq.png This snippet showc ...

javascripthtmlcssangular

Is the <a data-method='something' href ... requesting a POST method?

Yes, it does. Has this behavior been documented anywhere? Situation: I made an error with my RoR Helper and created Links with data-method='GET'. Everything still functioned correctly, but I received a "Resend Data Warning" when refreshing the ...

html

What benefits does React offer that jQuery does not already provide?

What sets ReactJS apart from jQuery? If jQuery can already handle everything, why should we use React? I've tried to research on Google but still don't have a clear answer. Most explanations focus on terms like "views," "components," and "state" ...

javascripthtmlcssreactjsdom

The Toggle Switch effectively removes the CSS class when set to false, but fails to reapply the class when set to true

Implementing a toggle switch using Bootstrap5 to control the visibility of grid lines. The setup includes adding a class to display grid lines when the toggle is true, and removing the class to hide the lines when the toggle is false. However, the issue ar ...

javascriptcssbootstrap-5

Retrieve the individual character styles within an element using JavaScript

I'm currently dealing with a dynamically created div that features styled characters like: <div>Hello <b>J</b>oe</div> and my goal is to identify which characters are styled (in this case, the letter J). I've already atte ...

javascripthtmlcss