How can i make a fade on bootstrap tabs when sliding to the edges on smaller screens-CodePudding

I'd Like to make the text fade when it reaches the area highlighted in red and also on the icon search icon on the left. these tabs slide left and right on smaller screens. these are bootstrap tabs. ive tried to add opacity on the text on (min-width: 320px) and (max-width: 414px) but that didn't work. i'd appreciate any help.

CodePudding user response：

Here's an example I've made for fading to the side on a regular div. Basically a absolutely positioned semi transparent gradient on the side.

.a-relative-container {
  position: relative;
  background: white;
  height: 120px
}


.the-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap
}

.some-shadow {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  left: 0;
  background-image: linear-gradient(to left, rgba(255, 255, 255, .2) 0, #fff 100%);
  background-repeat: repeat-x  
}

<div >

  <div >
  </div>

  <div >

    abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
  </div>

</div>