Creating a clean and modern design with Bootstrap 4 by applying bottom borders solely to the

I need to create a sidebar with a bottom border after each li element, except the last one. However, I'm facing an issue with Bootstrap 4 where using border-0 removes all borders on list-group-items. I've tried editing it via CSS but can't seem to make it work as intended; only displaying one bottom border after the last li element.

Here is a preview image of what I am trying to achieve:

https://i.sstatic.net/7W0gC.png

Below is my code snippet:

.sidebar {
    position: fixed;
    z-index: 9999;
  }
  .menu {
    position: fixed;
    background-color: #fff;
    height: 100vw;
    width: 90px;
    top: 60px;
    overflow: hidden;
    .list-group-item {
      border: 0;
    }
    a {
      color: gray;
      font-size: 16px;
      span {
      white-space: nowrap;
    }
    }
  }
  .menu:hover {
    width: 260px;
  }
<div class="sidebar">
      <ul class="list-group flex-column d-inline-block menu">
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
      </ul>
    </div> <!-- /.sidebar -->

htmlcsstwitter-bootstrapsassbootstrap-4

Answer №1

To apply a border specifically to the .list-group-item within your .menu and remove the bottom-border of the last li element, you can use the following CSS:

.sidebar {
  position: fixed;
  z-index: 9999;
}
.menu {
  position: fixed;
  background-color: #fff;
  height: 100vw;
  width: 90px;
  top: 60px;
  overflow: hidden;
}
.menu .list-group-item {
  border-bottom: 1px;
}
.menu .list-group-item:last-child {
  border-bottom: 0;
}

.menu a {
  color: gray;
  font-size: 16px;
}
.menu a span {
  white-space: nowrap;
}
.menu:hover {
  width: 260px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="sidebar">
      <ul class="list-group flex-column d-inline-block menu">
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
      </ul>
    </div> <!-- /.sidebar -->

Answer №2

<h5 class="card-title">This example should function properly without the need for any additional CSS styling</h5>
<ul class="list-group list-group-flush">
    <li class="list-group-item">First</li>
    <li class="list-group-item">Second</li>
    <li class="list-group-item">Third</li>
    <li class="list-group-item">Fourth</li>
</ul>

Answer №3

Explore the use of last-of-type to modify the styles of the final element

.list-group-item:last-of-type {
  border-bottom: 0;
}

Answer №4

To target the last child element of a list item within an unordered list, you can utilize the ::last-child pseudo-class selector:


.sidebar {
  position: fixed;
  z-index: 9999;
}
.menu {
  position: fixed;
  background-color: #fff;
  height: 100vw;
  width: 90px;
  top: 60px;
  overflow: hidden;
  
  .list-group-item:last-child {
    border-bottom: 0;
  }
  
  a {
    color: gray;
    font-size: 16px;
    
    span {
      white-space: nowrap;
    }
  }
}

.menu:hover {
  width: 260px;
}

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

Adjustable background image with no need for a scroll bar

I am looking to create a static webpage that remains fullscreen without any scrolling. My goal is to have a centered form with the background image adjusting to the window size. As a beginner, I apologize if this request seems too simple. .container { ...

htmlcssimagescrollbackground

Is the video failing due to excessive adjustments of the video's currentTime?

Utilizing both user drag event and keypresses to adjust the position in an HTML5 video element, I am updating the video time with the following line of code: video.currentTime = toTime; Additionally, I am updating a canvas based on the video's posit ...

javascripthtmlvideo

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

How can we show a React JS component when clicked, without using the App.js file for display?

How can I display a component onclick in React JS without using UseState in a file other than App.js? This code will be in App.js var [clicks, setClicks] = useState(false) return( <> {clicks && &l ...

javascripthtmlreactjs

Utilize AngularJS $sanitize to convert characters into HTML code

When attempting to decode characters using $sanitize, I encountered a problem. I must use the $sanitize service instead of ng-bind-html, yet I am getting different results with each one. Despite ng-bind-html utilizing $sanitize internally, the outputs are ...

javascripthtmlangularjs

javascript onload select the text in the textarea

Is there a way to have JavaScript automatically highlight the text inside a textarea when the page is loaded? ...

javascripthtml

Executing a particular function on multiple buttons that have not been initialized yet

I am struggling to make this code work for every button and I haven't been able to find an explanation for the issue. I believe it may be a small detail that I am overlooking. $(document).ready(function() { // delete the selected row from the datab ...

javascriptjqueryhtmlajax

Different ways to showcase multiple columns in a bootstrap dropdown

In my React JS application, I successfully implemented a bootstrap dropdown control (located below Tag) that meets my needs. However, I am now seeking guidance on how to display multiple columns in the dropdown menu. Specifically, I would like to show bo ...

reactjsbootstrap-4

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

Creating a web layout or template using HTML

Currently in the process of developing a website, my goal is to construct html templates that include placeholders for injecting pages/content, menus, and other elements. While I admire AngularJS for its flexibility in achieving this, I fear it may be too ...

htmltemplateslayoutangularjs

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

Establishing a connection between HTML and MySQL database

I've been researching how to create a login system on my HTML page. From what I've learned, it seems I need to use an intermediate script to allow my HTML access to the database. So, I've created a PHP page that verifies the username and pas ...

phphtmlajax

Using Tailwind's media query functionality within ReactJS

I have a situation where I have a div containing an image within it. I am attempting to use media queries from the Tailwind CSS framework. <div className="flex"> <img src="/assets/logo.png" className="h-20 md:w-2" ...

cssreactjstailwind-css

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

.after() function not behaving as expected

Working on a chrome extension, I encountered a snippet of code: $('a').filter(function() { return $(this).html().match(/myexpressionhere/); }).after().append('<img src="myImage" />'); Upon execution, the code successfully adds m ...

jqueryhtmldom

Activating Cors Support on Firefox

When working with AngularJS, I wrote the following code to make an API call: $http({ method: 'GET', url: 'https://www.example.com/api/v1/page', params: 'limit=10, sort_by=created:desc', //h ...

javascriptjqueryhtmlajaxangularjs

Why won't my Bootstrap carousel slide properly?

I am facing an issue with implementing a carousel in my web development course on udemy. Despite applying the necessary controls, the carousel doesn't seem to work as expected. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a hr ...

htmlcssbootstrap-4

The app was rejected from the Play Store due to a breach of section 4.4 in the Developer Distribution Agreement

Just got an email notification that my application submission, Chami Browser, has been rejected due to violation of section 4.4 of the Developer Distribution Agreement. The reason for rejection is accessing YouTube videos in violation of their Terms of Se ...

androidhtmlwebviewyoutube

Inability to input text into a textbox with AngularJS

I am currently working on developing an AngularJS app. I have encountered a problem where I am unable to input text into a textbox. The issue lies with my zoomService which handles zoom increments and decrements. While the user can zoom using a slider and ...

javascripthtmlcssangularjstextbox

How to utilize PHP to create a multiple select form for filtering results in a MySQL

I have been attempting to create a query using the results from a search form. In my form, I have a field called "state". My goal is to allow users to select multiple states and receive a list of results that include all the selected states. Currently, I o ...

phpmysqlhtml