I want to make an icon, text in the different row by bootstrap4

Question

I want to make an icon, text in the different row by bootstrap4.

Guys, I am practising by bootstrap4 for beginner level; I am struggling; I could not make the icon in the centre in the first row and the subtitle by h3 in the second row.

I put text with h3 then add an icon by class, which affected the icon with the text in the same row. However, this is not what I want.

Again, I changed the other way round, so I created three columns by the grid, and I put the icon into the div together, but the effect is even worse.....the style by h3 and the button text in the 3rd row has lost the text style.

Please advise the solution so that I could clear the challenge.

Thanks and highly appreciated!

  


  
  TinDog
  
  

  

  
  
  
  
  

  
  
  
  



  
  

    
      
        
          Easy to use.
          So easy to use, even your dog could do it.
        

        
          Elite Clientele
          We have all the dogs, the greatest dogs.
        
        
        Guaranteed to work.
          Find the love of your dog's life or your money back.

user_8402369 · Answer

You can add the text-center class to your row to center the icons:

...

To fix the subtitles in the columns, you need to move the icon classes out of the columns' styles. Right now you have something like this:


    Subtitle


...rest of the columns

The h3 subtitle's styles (the whole column's styles, actually) are overwritten by the fas fa-icon icon class. Place the icon within the column instead, like so, to solve that problem:


    
    Subtitle


...rest of the columns




    
    TinDog
    
    
    
    
    
    
    
    



    
        
            
                
                    Easy to use.
                    So easy to use, even your dog could do it.
                
                
                    Elite Clientele
                    We have all the dogs, the greatest dogs.
                
                
                    Guaranteed to work.
                    Find the love of your dog's life or your money back.

user_14970599 · Answer

Hi I made it finally and I believe I solve this problem. Thanks all


  
    
    Easy to use.
    So easy to use, even your dog could do it.
  

  
    
    Elite Clientele
    We have all the dogs, the greatest dogs.
  

  
    
    Guaranteed to work.
    Find the love of your dog's life or your money back.

#title{background-color: #ff4c68;
color: #fff;
}

body {
  font-family: "Montserrat";
}

.container-fluid{
  padding: 3% 15%
}

h1{
font-weight: bold;
font-size: 3.5rem;
line-height: 1.5;
}

h2{
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 1.5;
}

h3{
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 18px;
}

p{
  color: #8f8f8f;
}

/* navigation bar */

.navbar{
  padding: 0 0 4.5rem;
}

.nav-item{
  padding: 0 18px 0 18px;
}

.nav-link{
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 400;
}


.navbar-brand{
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

/* download buttons */

.download-buttons{
  position: relative;
  margin: 5% 3% 5% 0;
   right: 40px;
}

/* title-image */
.title-image{
  width:60%;
  -ms-transform: rotate(25deg); /* IE 9 */
  -moz-transform:rotate(25deg);
  -webkit-transform:rotate (25deg);
  transform: rotate(25deg);
}

/* features-section */
#features{
  padding: 7% 15%;
}

.sub-title{
  font-size: 15px;
}

.features-box{
  text-align: center;
  padding: 5%;
}

.icon{
  color: #ef8172;
  margin-bottom: 1rem;
}

.icon:hover{
color: #ff4c68;
}





  
  TinDog
  
  

  

  
  
  
  
  

  
  
  
  





  

    
      
        
        Easy to use.
        So easy to use, even your dog could do it.
      

      
        
        Elite Clientele
        We have all the dogs, the greatest dogs.
      

      
        
        Guaranteed to work.
        Find the love of your dog's life or your money back.

I want to make an icon, text in the different row by bootstrap4

2 Answers