Tips for minimizing separation by utilizing timeline panels in Bootstrap

Is there a way to decrease the spacing between each panel? Right now, they are too far apart and when I fill up a lot of space, the navigation bar always shows up. I don't want that horizontal bar to be visible.

I want to avoid that bar from appearing when there is less content in place.

https://i.sstatic.net/L9o6W.jpg

This is how I envision the reduced separation:

https://i.sstatic.net/8fxgG.jpg

Update:

Please help me with reducing the separation:

https://i.sstatic.net/THCc6.jpg

Thank you for your assistance

 /* Timeline */

 .timeline,
 .timeline-horizontal {
   list-style: none;
   padding: 20px;
   position: relative;
 }

 .timeline:before {
   top: 40px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 3px;
   background-color: #eeeeee;
   left: 50%;
   margin-left: -1.5px;
 }

 .timeline .timeline-item {
   margin-bottom: 20px;
   position: relative;
 }

 .timeline .timeline-item:before,
 .timeline .timeline-item:after {
   content: "";
   display: table;
 }

 ...

</ul>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

To bring the panel closer to the icon, you can decrease the margin-bottom property from 20 to 6 pixels in the 

.timeline-horizontal .timeline-item .timeline-panel
CSS.

.timeline-horizontal .timeline-item .timeline-panel {
   top: auto;
   bottom: 64px;
   display: inline-block;
   float: none !important;
   left: 0 !important;
   right: 0 !important;
   width: 50%;
   margin-bottom: 6px;
 }


/* Unique Timeline Styles */

.timeline,
.timeline-horizontal {
   list-style: none;
   padding: 20px;
   position: relative;
}

.timeline:before {
   top: 40px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 3px;
   background-color: #eeeeee;
   left: 50%;
   margin-left: -1.5px;
}

/* More timeline styles here... */

 body {
   overflow-x: hidden;
 }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div style="display: inline-block; width: 100%; overflow-y: auto;">
      <ul class="timeline timeline-horizontal">
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title"> 0</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>
        /* Additional timeline items go here */
      </ul>
    </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

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...

javascriptphphtmlarrayscheckbox

Firefox doesn't seem to support keyframes animation

I implemented keyframes to create a pulsating effect on text every 15 seconds. This effect works in Chrome but not in Firefox. I'm unsure how to introduce a 15-second delay between each pulse, so I experimented with using more percentages; however, I ...

csscss-transitionscss-animations

Using the power of HTML5, store data locally on

I am curious about the possibility of using local storage on a different page. I want to track clicks made on one page and display it on another, but I'm not sure how to go about it or if it's even feasible. Any help you can provide would be grea ...

javascripthtml

Rotating a div in HTML and CSS is not achieving the desired 180-degree rotation

Having trouble implementing a Fill animation that goes from the bottom to the top of the box .box-inner-1. The CSS Rotate property seems to be malfunctioning! $('.box-inner-1').css({ top: '0' }).animate({ "height": 260 }, 4000); ...

javascripthtmlcss

Having trouble getting event modifiers to work in Vue when added programmatically

Trying to dynamically add events using v-on through passing an object with event names as keys and handlers as values. It appears that this method does not support or recognize event modifiers such as: v-on=“{‘keydown.enter.prevent’: handler}” T ...

javascripthtmlvue.jseventsevent-handling

Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

I am currently working on a progress bar and I would like it to look similar to this: https://i.sstatic.net/TSDEy.png However, my current output looks like this: https://i.sstatic.net/rQhYc.png I'm puzzled as to why the tooltip is floating there, ...

htmlcssbootstrap-4

Can error rendering for violation constraints be customized in Symfony 5?

As a novice in symfony, I am eager to craft a registration form using the framework's tools from scratch, without relying on the "make:register ..." command line. While I have successfully set up a form and constraints with annotation syntax, my chall ...

phpsymfonybootstrap-4twig

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

Analyzing text with improperly defined attributes

As I attempted to analyze an HTML document as XML by adding the XML start at the beginning, I encountered an issue with attributes within tags. <tr> <td class="yfnc_tabledata1" nowrap align="right">Jun 4, 2013</td> <td class="yfnc_tab ...

htmlxmlxsltxml-parsing

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

javascripthtmljquerycss

Sending values from multiple input fields created in PHP using AJAX can be done by following these steps

https://i.sstatic.net/GKcRc.png Within this snippet, there is a portion of a form that consists of 4 different fields/divs like the one shown. I am struggling to figure out how to send the values of these input fields to PHP using AJAX. I apologize if ...

javascriptphphtmlarraysajax

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...

cssdjangodocker

Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

In my table, I have included options for the days of the week such as Everyday, Weekdays, and Weekend. Each row contains 2 select items to choose start and end times for updates. Additionally, there is a toggle button at the end of each row that enables or ...

cssvue.jstoggleshow-hide

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

javascriptjqueryhtmlcss

Maximizing the potential of a single .js file for multiple .html pages with AngularJS

I have a JavaScript file containing a function that I want to be accessible by multiple HTML pages without duplicating it in another file. Currently, the JS file starts with the following code snippet: (function(){ var app = angular.module('Proj ...

javascripthtmlangularjs

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin ...

htmlcssruby-on-railsbootstrap-4

Tips for aligning text and an image next to each other within a table column using HTML

I have a table where I am displaying an image and text in separate columns, with the image above the text. However, I want to showcase them side by side and ensure that the table fits perfectly on the screen without any scroll bars. Here is my HTML code s ...

htmlcss

When adjusting the size of the browser window, the div on my web page shifts to the bottom, creating a large empty space at

I have encountered an issue where, when I resize the browser window, my div moves to the bottom and leaves a large space at the top. I would like the div to remain in the center of the page, even if I resize the window to be smaller than the size of the ...

htmlcss

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

javascriptcssnode.jsexpress

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss