Column Layout for Bootstrap Audio Player

Question

I wanted to design an audio player footer for a website using HTML, CSS (Bootstrap), but I am struggling with figuring out the layout for columns to align all the assets properly. Here is the layout I want to achieve:

Here is what I have currently:

This is the following code that I have:


    
         
    

    
          NAME 
          ARTIST 
    



.column-wrapper-player {
    width:100%;
    height:100%;
    display: flex;
    flex-direction: row;
}

.column-left-player {
    width: 50px;
    height: 100%;
    flex-shrink: 0;  
}

.column-right-player {
    width: 100%;
}

How can I go about achieving the model layout with custom columns?

Edit: I have all the necessary assets, including the buttons and sliders. I just need to figure out how to align everything properly and cleanly in columns.

user_3233135 · Answer

Very nice question, I really enjoyed doing this layout.

I have made a full live Youtube video on this layout. Please check the below link:

https://youtu.be/GKz6AH-e7FI

And I have added the code also here in Stackoverflow Let me know if you have any questions.

div.progress{height:3px;}
.volume-progress{width:100px;}
.play-icons{    margin-top: 2px;}







  
    
      
        
        
          Song name
          Artist name
        
      
    
    
      
        shuffle
        skip_previous
        play_circle_outline
        skip_next
        repeat
      
      
        0:00
        
          
        
        2:59
      
    
    
       open_in_full 
      
          
       
       volume_down 
       queue_music       
       playlist_play

Column Layout for Bootstrap Audio Player

1 Answers