Increase the padding and add a border to separate the list items in bootstrap 4

Question

Increase the padding and add a border to separate the list items in bootstrap 4

I have a header with some links and I want to create space and add a border between them.

I attempted using ::before pseudo-content, but it's not displaying the content where I intended.

.header_links_ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header_links_ul li a {
  color: #000;
  font-size: 12px;
  display: block;
}

@media (min-width:992px) {
  .header_links_ul li+li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 8px;
    margin-top: -4px;
    background: #ff0000;
    content: '';
  }
}

<div class="row">
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
      <li><a href="#">Vásárlási információk</a></li>
      <li><a href="#">Szállítás</a></li>
      <li><a href="#">Kapcsolat</a></li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_right d-flex justify-content-center justify-content-md-end">
      <li><a href="#">Regisztráció</a></li>
      <li><a href="#">Bejelentkezés</a></li>
    </ul>
  </div>
  <div class="clearfix"></div>
</div>

The current result I have can be seen on this photo, along with what I am aiming for: https://i.sstatic.net/iUk6k.jpg

html css bootstrap-4

Answer 1

Answer №1

Feel free to utilize the provided code snippet. You can access the accompanying LINK

.header_links_ul li{
  padding: 0px 20px;
  border-right:1px solid #000;
}
.header_links_ul li:last-child{
  padding: 0px 20px;
  border-right:none;
}

Answer 2

Feel free to utilize the provided code snippet. You can access the accompanying LINK

.header_links_ul li{
  padding: 0px 20px;
  border-right:1px solid #000;
}
.header_links_ul li:last-child{
  padding: 0px 20px;
  border-right:none;
}

Answer 3

Answer №2

Hello @max777, I recommend incorporating the following CSS into your code for improved styling:

<style>
  .header_links_ul li {
    border-right: 1px solid green;
    margin-left: 2%;
  }
</style>

Answer 4

Hello @max777, I recommend incorporating the following CSS into your code for improved styling:

<style>
  .header_links_ul li {
    border-right: 1px solid green;
    margin-left: 2%;
  }
</style>

Answer 5

Answer №3

To properly space out the li tags, you will need to add position:relative along with some padding and margin. Here's a suggestion:

.header_links_ul li+li {
 position: relative;
 padding-left: 20px;
 margin-left: 20px;
}

The ::before pseudo elements are placed absolutely, so the top and left values specified will be relative to the next parent element with relative or absolute positioning. If there is no such parent, it will default all the way back up to the element itself, meaning it will be positioned relative to the page itself (which seems to be the issue in this case).

For more information and additional reading, check out: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 6

To properly space out the li tags, you will need to add position:relative along with some padding and margin. Here's a suggestion:

.header_links_ul li+li {
 position: relative;
 padding-left: 20px;
 margin-left: 20px;
}

The ::before pseudo elements are placed absolutely, so the top and left values specified will be relative to the next parent element with relative or absolute positioning. If there is no such parent, it will default all the way back up to the element itself, meaning it will be positioned relative to the page itself (which seems to be the issue in this case).

For more information and additional reading, check out: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 7

Answer №4

Creating a header using this method is not recommended!

Instead, consider using the bootstrap nav bar by referencing the links below:

Bootstrap Navbar Documentation W3Schools Bootstrap Navbar Tutorial

To style your navigation items, apply position:relative to the li element as shown below

.header_links_ul li {
  position: relative;
 }

If you require further assistance, please share a CodePen or fiddle of your code for better understanding.

Answer 8

Creating a header using this method is not recommended!

Instead, consider using the bootstrap nav bar by referencing the links below:

Bootstrap Navbar Documentation W3Schools Bootstrap Navbar Tutorial

To style your navigation items, apply position:relative to the li element as shown below

.header_links_ul li {
  position: relative;
 }

If you require further assistance, please share a CodePen or fiddle of your code for better understanding.

Answer 9

Answer №5

.header_links_ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .header_links_ul li a {
          color: #000;
          font-size: 12px;
          display: block;
        }
        .header_links_ul li{
        line-height:15px
        }

        @media (min-width:992px) {
          .header_links_ul li+li::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 8px;
            margin-top: -4px;
            background: #ff0000;
            content: '';
          }
        }

<div class="row">
          <div class="col-md-6">
            <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
              <li><a href="#">Shopping Information</a></li>
              <li><a href="#">Shipping</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-6">
            <ul class="header_links_ul header_links_ul_right d-flex justify-content-center justify-content-md-end">
              <li><a href="#">Registration</a></li>
              <li><a href="#">Login</a></li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </div>

Answer 10

.header_links_ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .header_links_ul li a {
          color: #000;
          font-size: 12px;
          display: block;
        }
        .header_links_ul li{
        line-height:15px
        }

        @media (min-width:992px) {
          .header_links_ul li+li::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 8px;
            margin-top: -4px;
            background: #ff0000;
            content: '';
          }
        }

<div class="row">
          <div class="col-md-6">
            <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
              <li><a href="#">Shopping Information</a></li>
              <li><a href="#">Shipping</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-6">
            <ul class="header_links_ul header_links_ul_right d-flex justify-content-center justify-content-md-end">
              <li><a href="#">Registration</a></li>
              <li><a href="#">Login</a></li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </div>

Increase the padding and add a border to separate the list items in bootstrap 4

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

IE11 React application cannot recognize the <main> tag

Achieving compatibility with IE7 for utilizing "before:" and "after:" pseudo-elements along with the "box-sizing:border

What is the best way to arrange multiple elements on the second row within a div?

Tap to smoothly scroll through each block using the animate() function

concealing additional content within a DIV using ellipsis

What are the steps to creating a fading effect for an item that appears as it enters the field of view and disappears as it exits the field of view?

It is not possible to attach separate links to images in a JavaScript slider

The responsive design of Bootstrap NavBar seems to be malfunctioning when viewed on an iPhone device

Struggling with setting up a search bar for infinite scrolling content

Is there a way to make the hoverzoom effect only apply to a specific object instead of all objects?

Transform preexisting Vue UI library measurements into pixels

Utilize grids to ensure consistency in the width of every <li> element across the browser

Any tips on creating a website with a gradient background that moves along with the window as you scroll?

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Parent window login portal

In Chrome, the computed style of background-position is returned as 0% 0%

I'm experimenting with crafting a new color scheme using MUI, which will dynamically alter the background color of my card based on the API

The hover functionality for the cursor's pointer is malfunctioning

Can HTML Elements be used within a Contenteditable section?

transform the input button into an anchor tag