justify-content-center not working on carousel

Question

I'm trying to center my carousel with it's images and it's not working. I tried putting the justify-content-center the carousel inner div, outside of that, trying to do it in CSS but it just won't work.

Html







    
    
    
    

    Scary Configs | Media




    
        Home
        
        
            
                
                    Purchase
                
                
                    Media
                
                
                    Feedback
                
                
                    Terms of Service
                
                
                    Login/Register
                
            
        
    




    
        
            
                Media with my config
                
                
            
        
    



    Screenshot Media

css

body {
    background-color: #121212;
    height: 100%;
    padding-bottom: 50px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.card {
    border: none;
}

#jumbo-text, #video-header {
    color: white;
    opacity: 40%;
    text-align: center;
}
#jumbo {
    @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@700&display=swap');
    background: rgba(200, 200, 200, 0.05);
    font-family: 'Antonio', sans-serif;
}

#purchase-btn {
    color: white;
}

.navbar {
    font-size: 1.5em;
}

.w-100 {
    width: 800px !important;
    height: 40vh;
}

Also how would I add margin between the two video embeds? I tried adding mx-5 and it just places them horizontally? The same happens when I use padding instead of margin.

user_1011984 · Answer

To use Bootstrap-4 classes, like justify-content-center to center your carousel, you need to be using Bootstrap’s grid system of rows and columns. Also, you shouldn’t redefine Bootstrap classes like w-100 (which is for width: 100%) to be a fixed width. The idea behind Bootstrap is elements are defined as percentages so when users use a different screen size, they get a viable experience.

Same for the video section – rather than having fixed sizes, you can use Bootstrap’s row, col, and embed classes.

You were using an older version of Bootstrap CSS (4.0.0) and JavaScript (4.3.1). I switched everything to the latest V4 version (4.6.0)

And you seemed to be restricting everything to the available screen (no overflow), but not everything would fit, so I commented out those styles.








    
        Home
        
        
            
                
                    Purchase
                
                
                    Media
                
                
                    Feedback
                
                
                    Terms of Service
                
                
                    Login/Register
                
            
        
    





    
        Media with my config
    
    
        
            
        
        
        
            
        
    



    
        
            
                Screenshot Media

justify-content-center not working on carousel

1 Answers