Почему мой bootstrap график не корректен?

Question

мой код не работает. Я пытаюсь создать график, используя bootstrap для моей работы / образования. Я использовал HTML и CSS из примера временной шкалы в W3School, но это не получилось, когда я запустил его в браузере. Когда он запускается в браузере, стиль отсутствует, и каждый абзац накладывается друг на друга. Кто-нибудь может помочь?

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

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.container left {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.container right {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.right::after {
  left: -16px;
}

.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

@media screen and (max-width: 600px) {
.timeline::after {
    left: 31px;
}

.container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
}

.container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.left::after, .right::after {
    left: 15px;
}

.right {
    left: 0%;
  }
}

<div class="work/education">
            <section class="work/education">
            <div class="row">
                <div class="col-12 my-5">
                    <h2 class="text-uppercase">Work/Education</h2>
            </div>
                <div class="timeline">
                    <div class="container left">
                        <div class="content">
                            <h2>Sep 2014</h2>
                            <p>Enrolled in Business Studies Undergrad at UL</p>
                        </div>
                    </div>
                    <div class="container right">
                        <div class="content">
                            <h2>Jan 2017</h2>
                            <p>Began 8-month intership at Liberty Insurance</p>
                        </div>
                    </div>
                    <div class="container left">
                        <div class="content">
                            <h2>Aug 2018</h2>
                            <p>Graduated from University</p>
                        </div>
                    </div>
                    <div class="container right">
                        <div class="content">
                            <h2>Aug 2018</h2>
                            <p>Began work with Northern Trust Corporation</p>
                        </div>
                    </div>
                    <div class="container left">
                        <div class="content">
                            <h2>July 2019</h2>
                            <p>Enrolled in Full-Stack Software Development Course</p>
                        </div>
                    </div>
                    <div class="container right">
                        <div class="content">
                            <h2>June 2020</h2>
                            <p>Graduated from Code Institute Course</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

Answer 1

Прежде чем копировать и вставлять из w3schools, проверьте атрибут класса и то, как они называют элементы. Временная шкала от w3schools использует «контейнер» на div для левого и правого. Bootstrap также использует «контейнер», поскольку необходимо использовать их сетку system . Просто дайте «контейнеру» для временной шкалы другое имя.

codepen

<div class="tl_container left">
    <div class="content">
      <h2>Sep 2014</h2>
      <p>Enrolled in Business Studies Undergrad at UL</p>
    </div>