Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in the first column and an image in the second column without the image being pushed to the next row. Upon inspecting the element, I've noticed a large margin (orange area) that I can't seem to remove. Any suggestions on how to fix this issue would be greatly appreciated! This post marks my debut on Stack Overflow, so I hope I'm not being too long-winded! Thank you!

View Relevant Code

<div class="row mt-3 no-gutters">
    <div class="col-md-12">
      <div class="timeline">
        <div class="timeline-item-left">
          <div class="col-md-6 text-right p-3 mr-0">
            <h3>December 2017</h3>
            <h5>Big Basin Redwoods State Park </h5>
            Berry Creek Falls Loop | 10 Miles             
          </div>
          <div class="offset-md-6 col-md-6 text-left">
            <a href="adventure_images/big_basin.jpg">
              <img src="adventure_images/big_basin.jpg" class="img-thumbnail" alt="Big Basin" width="150"> 
            </a>
          </div>         
        </div>

CSS

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
/* Containers around content */
.timeline-item-left {
    padding: 10px 30px;
    position: relative;
    background-color: white;
    width: 100%;
}
.timeline-item-right {
    padding: 10px 30px;
    position: relative;
    background-color: white;
    width: 100%;
}

See Screenshot of Element Inspection

Check Out Website for Detailed Inspection

htmlcssbootstrap-4timelinemargins

Answer №1

Feel free to incorporate the following CSS into your design:

 .timeline-item-left,.timeline-item-left {display: flex}

Additionally, it is recommended to eliminate the class offset-md-6.

Answer №2

Check out the code snippet below 

.timeline-item-left {
    padding: 10px 30px;
    position: relative;
    background-color: white;
    width: 100%;
    display: flex;
}

Eliminate the offset-md-6 class

<div class="offset-md-6 col-md-6 text-left">

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

Increase the font size of a div using CSS to make it appear larger

Utilizing a WYSIWYG-editor, I am creating content that I want to display with double font-size, without directly altering the HTML code. Here is an example of the HTML structure: <div id="contents"> <p style="text-align:center"> <spa ...

htmlcssfont-size

The input field is failing to show up on the screen

I have been working on my React app and experimenting with how to dynamically display input elements based on different screen sizes. To achieve this, I implemented the use of window.innerWidth as shown in the code snippet below: <div className='Tr ...

cssreactjsinputjsxconditional-rendering

Tips for expanding an md-nav-item in Angular Material

Need help on stretching the md-nav-item element illustration 1 ------------------------------------------------ | ITEM1 | ITEM 2 | ------------------------------------------------ illustration 2 ------------------------------------------------ | ...

htmlcssangularjsangular-material

Synchronize MySQL database structure with HTML5 local storage to enable querying

After researching HTML5 local storage, I am considering mirroring a MySQL database's structure for use in an application that requires a large amount of data for a single user. Why would I want to do this? As a web game developer in my spare time, I ...

phpmysqlhtmllocal-storageabstraction

Is there a way to trigger element closure using the esc key?

I have a panel that shows on initialization and hides when I press the 'close' icon. How can I make the panel close when I press the 'esc' button? Below is the HTML code for the panel: <div ng-init="vm.onInit()" class="mainContent"& ...

htmlangularjs

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Currently working on an app project and need assistance with implementing a feature. I have successfully set up a POST method for the checkboxes that are checked, but I am unsure how to retrieve this data and display it on my HTML page using a GET method ...

javascripthtmlajaxcheckboxget

Using Jinja2 to iterate through a dictionary while having the ability to choose which key-value pair to access

I'm attempting to generate an HTML table from data received on the web as a dictionary app.py: client = boto3.client('ec2') vpc_ids = client.describe_vpcs() for i in vpc_ids.get('Vpcs'): for tag in i.get('Tags'): ...

pythonhtmlflaskjinja2

What causes the sub-menus to move even when they are set to position: absolute?

The sub-menu items under the about link appear to be slightly shifted from the left, despite setting it with position: absolute; left: 0px. I aim to have all menu items (including sub-menus) perfectly overlapped. Below is the code snippet: <html> & ...

htmlcssdrop-down-menumenusubmenu

Clicking on the spinner does not activate it

I've implemented a basic spinner on my website, and it works fine when using the keyboard. However, I'm experiencing issues with mouse clicks. I can't seem to figure out what is causing this problem. Below is the code snippet related to the ...

jqueryhtmljquery-ui-spinner

Switching image when hovering with mouse using javascript

I am working on an HTML webpage and trying to make an image change when hovering over a div, but it doesn't seem to be working. Any suggestions? <!doctype html> <html> <head> <meta charset ="UTF-8"/> &l ...

javascripthtmlonmouseover

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

Tips on positioning a dropdown item to the far right of the page

I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...

htmlcssbootstrap-4

The issue of HTML5 Audio not playing after injecting the src URL

When the page loads, I have something similar to this: echo "<td class='audio'><audio controls><source src></audio></td>"; After that, I initiate an ajax call triggered by a click event to retrieve relative audio U ...

phpjqueryajaxhtmlaudio

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: https://i.sstatic.net/BH7Su.png Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap ...

htmlcsstwitter-bootstrap-3flexboxgrid

Tips for creating a responsive React Monaco Editor:

I'm currently working with react-monaco-editor and having trouble making it responsive. The component has a fixed height and width, so when I resize the screen, the width stays the same. <MonacoEditor width="1200" height=& ...

htmlcssreactjsmonaco-editor

Using Ajax and jQuery to dynamically insert an option into a datalist

I'm in the process of building a search box using Flask, MySQL, and ajax. I've managed to retrieve the search results in JSON format within the console, but now I want to dynamically add them to the options in my datalist element in the HTML. He ...

javascripthtmljqueryjsonajax

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

Displaying text on top of an image with the help of jquery and

I found a tutorial on this website that I'm trying to follow. It involves creating a fading/darkening effect on image rollover with text appearing, but I can't seem to get it to work even when starting from scratch. Despite having experience wit ...

jqueryhtmlcsshover

Having difficulty assigning the $_Session value in the captcha file

I'm having trouble assigning a value to $_Session in a captcha file. Below is the code for my captcha file: <?php session_name('U'); session_start(); session_regenerate_id(); ini_set('session.cookie_httponly',true); $string=&a ...

phpajaxhtmlsession

Is there a way to modify the background color of ::before when hovering over it?

I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...

javascripthtmlcssreactjssass