I want to increase width of Bootstrap container on Max width-CodePudding

I want to increase the width of the Bootstrap container on Max width with all devices responsive please help me how can do that ? thanks.

**My website link here please check ** https://urbanhomesrental.com/

css

   .container.home-container {
        max-width:1476px;
}

html view

 <div class="container home-container">
            <div class="rounded">
            <video class="video" autoplay="" loop="" muted="">
                <source src="https://urbanhomesrental.com/castle-theme- 
          assets/video/video-slider.mp4" type="video/mp4">
              </video>
            </div>
       </div>

CodePudding user response：

just add !important to your class... You can use the same bootstrap class but adding your style... You must to make sure your css file or style tag is after bootstrap file :) example:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>
.container{
  max-width: 100vw!important;
}
</style>

<body>
<div class="container bg-primary">
  Hey there
</div>
</body>

CodePudding user response：

try this

<div class="container home-container">
    <div class="row">
        <div class="col-12">
            <div class="rounded">
                <video class="video" autoplay="" loop="" muted="">
                    <source src="https://urbanhomesrental.com/castle-theme-
          assets/video/video-slider.mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
</div>