What could be the reason my bootstrap timeline isn't displaying the correct styling?

My code isn't functioning properly. I am attempting to build a timeline using bootstrap for my work/education. I have taken HTML and CSS from a timeline example on W3Schools but it is not rendering the same when viewed in the browser. Instead, there is no styling applied and each paragraph appears stacked on top of one another. Can anyone provide assistance?

body {
  background-color: #474e5d;
  font-family:"Exo", sans-serif;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
...
... (CSS code goes here)
...
        </div>

htmlcssbootstrap-4

Answer №1

Instead of blindly copying and pasting code from w3schools, take a moment to analyze the class attributes and naming conventions they use for elements. The timeline example on w3schools uses "container" for both left and right divs, which is also a standard practice in Bootstrap due to its grid system. To avoid confusion, consider giving the timeline container a unique name.

Check out this codepen

<div class="tl_container left">
    <div class="content">
      <h2>Sep 2014</h2>
      <p>Enrolled in Business Studies Undergrad at UL</p>
    </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

The HTML Canvas arc function fails to properly align curves

UPDATE Upon further investigation, I've discovered that this problem only occurs in Chrome. Could it be a browser issue rather than a coding problem? I'm working on creating a circle with clickable sections using HTML5 Canvas. The circle itself ...

javascripthtmlcanvas

Elevate the index of the name attribute for an input field within a dynamically generated form

In my scenario, I have created a form that includes indexed input fields for username and level: <form> <table> <tr class="trToClone"> <td> <label>Username:</label> <input type="text" name="usernam ...

javascriptjqueryhtmlforms

Combine the second and third rows into a unified single row

A Python script using BeautifulSoup to scrape a Wikipedia page for a list of Test cricket records and outputting the data into a Pandas DataFrame. From the Python script: import necessary libraries Define the Wikipedia page URL and header Request the pag ...

pythonhtmlpandasbeautifulsouphtml-parsing

Leveraging Bootstrap in Django with Django_tables2

What steps should be taken to integrate Bootstrap with django-tables2? Do I need to specify DJANGO_TABLES2_TEMPLATE = 'django_tables2/bootstrap4.html' somewhere? If I want to utilize bootstrap5 instead, what changes do I need to make? ...

pythondjangobootstrap-4django-viewsdjango-tables2

How to extract information for divs with specific attribute values using Jquery

I have multiple divs with IDs like #result-1, #result-2, each followed by a prefix number. To count the number of list items within these divs, I use the following code: $(document).ready(function () { var colorCount = $('#result-1 .item-result ...

javascriptjqueryhtml

Issue with Registration Form Redirection

This registration form has been created using a combination of HTML, PHP, and MYSQL. However, after filling out the form and submitting it, the page simply reloads. I'm unsure if there is an issue with my PHP or HTML code. I'm at a loss as to w ...

phphtmlmysql

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

htmlcssweb-hostingfile-management

Jquery unresponsive in AJAX form output presentation

I recently delved into the world of jquery and AJAX, and while I grasp most concepts, I'm struggling with a small code snippet. On my webpage, there is a summary of articles. Clicking on an article name triggers a popup window with detailed informati ...

javascriptphpjqueryhtmlajax

Is there a method to measure the time it takes to download a script apart from its actual execution time

I am looking to track timing variables for my primary JavaScript load. One approach could be: <script> performance.mark('script-start') </script> <script src="something.js"></script> Later in something.js, inc ...

javascripthtmlperformance

Sending an object from ng-repeat to a different page for the purpose of showcasing its contents

Currently, I am immersed in a project that involves MySQL, Angular, Express, and Node. Within this project, I have an array of objects displayed using ng-repeat. The goal is to allow users to click on a specific item and navigate to another page where they ...

htmlmysqlangularjsnode.jsmean-stack

A Step-by-Step Guide to Downloading Images by Clicking

Having an issue with my image download code. When I try to download an image, the process starts but doesn't complete and no file is received. Instead, a type error is encountered. <html> <head> <script type="text/javascript"> funct ...

javascriptjqueryhtml

Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the he ...

htmlcssvideoyoutube

How can I design a form that resembles the sign-in form used by Google?

Currently, I am in the process of creating a contact form for a website that is inspired by the design of Google's material sign-in form. I have successfully implemented an effect where clicking on the input field causes the label to change its posit ...

javascripthtmlcssmaterial-design

Select: Exchange icon when clicked

UPDATE MENU ICON jsfiddle.net/a3MKG/83/ Can someone provide guidance on how to change the menu icon image upon clicking it? I would like the icon to switch to a different image (such as an X) once it has been clicked. Please Note: When the menu icon is c ...

javascriptjquerycss

Customize the appearance of the submit button by using CSS to replace

Currently, I am working on a CSS userstyle project. The issue that I am facing is the inability to make modifications to images in buttons coded within the html of a web page: <button type="submit" class="btn btn-default"><img alt="Ico-plus" src= ...

htmlimagecss

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

javascriptjquerycsshtmlcanvas

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

The merging of several XSL files

Hey there, I have two separate xsl files and an xml file. Is there a way to merge these xsl files into one transform type to create a single HTML output? The first xsl file is called index.html: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCT ...

htmlxmlxsltxslt-1.0

The functionality of multiple UI-Views is not meeting the intended outcomes

I'm facing an issue with integrating multiple UI-views in my AngularJS dashboard app. Despite following the directory structure, I am unable to get it working as expected. This is how my directories are organized: index.html app/ app.js dash ...

htmlangularjsangular-ui-routerangularjs-routing

What could be causing the issue with my php login page not functioning properly?

When I try to log in, the system does not verify whether the user login is successful or not. Instead, it redirects me back to the login page after entering my username and password. Also, the header location function doesn't seem to be working proper ...

phphtml