Bootstrap align button to bottom of flex-box column

Question

I have searched through many posts to try and find a solution to my problem, however, none seem to work. I have tried applying 'align-self: flex-end' to the .reveal-btn however, this just shifts the button to the right. I want the button at the bottom of the card, 'margin-top: auto' has also been unsuccessful.

Im using bootstrap for basic layout of the site, although this particular section doesn't require bootstrap classes except the grid for layout. I wondered if Bootstrap is causing a confliction of styles somehwere?

I have attached an example of what I want to achieve. NOTE: The code snippet function doesnt seem to allow me to add a script tag for the necessary bootstrap CDN links hence the cards are laid out in a column, not a row.

.service-card {
  box-sizing: border-box;
  min-width: 40%;
  margin: 20px 10px;
  background-color: #e0e0e0;
  border: 2px solid rgba(0, 165, 227, 0);
  border-radius: 5px;
  transition: 0.5s;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.service-card:hover {
  border: 2px solid rgba(0, 165, 227, 1);
}

.service-card-header {
  border-bottom: 2px solid #00a5e3;
}

.service-card-header img {
  border-radius: 5px 5px 0 0;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
}

.service-card-heading {
  font-size: 18px;
  margin-bottom: 12px;
}

.service-card-desc {
  margin-bottom: 10px;
  font-size: 12px;
}

.reveal-btn {
  display: flex;
  margin-top: auto;
  border: 0;
  outline: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.reveal-btn .go-arrow {
  position: relative;
  background: #087ca7;
  width: 30px;
  height: 30px;
  border-radius: 2px;
}

.reveal-btn .go-arrow img {
  width: 15px;
  height: 15px;
}

.reveal-btn .go-arrow:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  top: 12.5px;
  right: -1.5px;
  background: #087ca7;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.reveal-btn .reveal-text {
  display: flex;
  position: relative;
  width: 0;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: #00a5e3;
  color: #fff;
  font-weight: 300;
  transition: 0.6s all;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.reveal-btn .reveal-text span {
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 50%;
  font-size: 12px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: 0.6s all ease-in;
  transition-delay: 0.2s;
}

.reveal-btn:hover .go-arrow:after {
  right: -2px;
}

.reveal-btn:hover .reveal-text {
  width: 100px;
}

.reveal-btn:hover .reveal-text span {
  opacity: 1;
  top: 0;
}


  
    
      
        
          
            
          
          
            Accident Repair
            
              Hassle free repairs that ensure your car is returned to its original condition. We'll do all of the insurance liaison.
            
            
          
        
      
      
        
          
            
          
          
            Scratch and Dent Removal
            
              We remove scratches and dents no matter who large or small. Each prepared and finished for long term results.
            
            
          
        
      
      
        
          
            
          
          
            Restoration
            
              Got a dream car but its seen better days? We’re here to help return it to its natural beauty.
            
            
          
        
      
      
        
          
            
          
          
            Modifications
            
              Making your car look unique helps to turn heads. We offer a large range of modification and customisation options to win over the crowd.

Carol Skelly · Accepted Answer

The auto margins (mt-auto) will work on flexbox children. Therefore, service-card should be display:flex too. Then use flex-grow:1 to make the service-card-body fill the remaining card height.

.service-card {
  min-width: 40%;
  margin: 20px 10px;
  background-color: #e0e0e0;
  border: 2px solid rgba(0, 165, 227, 0);
  border-radius: 5px;
  transition: 0.5s;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  border: 2px solid rgba(0, 165, 227, 1);
}

.service-card-header {
  border-bottom: 2px solid #00a5e3;
}

.service-card-header img {
  border-radius: 5px 5px 0 0;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  flex-grow: 1;
}

.service-card-heading {
  font-size: 18px;
  margin-bottom: 12px;
}

.service-card-desc {
  margin-bottom: 10px;
  font-size: 12px;
}

.reveal-btn {
  display: flex;
  margin-top: auto;
  border: 0;
  outline: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.reveal-btn .go-arrow {
  position: relative;
  background: #087ca7;
  width: 30px;
  height: 30px;
  border-radius: 2px;
}

.reveal-btn .go-arrow img {
  width: 15px;
  height: 15px;
}

.reveal-btn .go-arrow:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  top: 12.5px;
  right: -1.5px;
  background: #087ca7;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.reveal-btn .reveal-text {
  display: flex;
  position: relative;
  width: 0;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: #00a5e3;
  color: #fff;
  font-weight: 300;
  transition: 0.6s all;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.reveal-btn .reveal-text span {
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 50%;
  font-size: 12px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: 0.6s all ease-in;
  transition-delay: 0.2s;
}

.reveal-btn:hover .go-arrow:after {
  right: -2px;
}

.reveal-btn:hover .reveal-text {
  width: 100px;
}

.reveal-btn:hover .reveal-text span {
  opacity: 1;
  top: 0;
}








  

  
    
      
        
      
      
        Accident Repair
        
          Hassle free repairs that ensure your car is returned to its original condition. We'll do all of the insurance liaison.
        
        
      
    
  
  
    
      
        
      
      
        Scratch and Dent Removal
        
          We remove scratches and dents no matter who large or small. Each prepared and finished for long term results.
        
        
      
    
  
  
    
      
        
      
      
        Restoration
        
          Got a dream car but its seen better days? We’re here to help return it to its natural beauty.
        
        
      
    
  
  
    
      
        
      
      
        Modifications
        
          Making your car look unique helps to turn heads. We offer a large range of modification and customisation options to win over the crowd.

https://www.codeply.com/go/N9hMhTSOOK

P.S - the Snippet tool allows you to insert CSS links and scripts at the top of the HTML section.

Bootstrap align button to bottom of flex-box column

Answers (1)

Related Questions