title: How to shorten width of input field - Bootstrap v5 or CSS. keeping its responsiveness
body: <p>I can't find a way to reduce the width of the input window in the  code in the Jumbotron section. I can not see/find any code that controls the width of the input window. The code below is the  code from Bootstrap v5. How do I shorten the width of the input window, keeping it centered and its responsiveness?</p>
  <pre><code>    &lt;!doctype html&gt;
  &lt;html&gt;
      
      &lt;head&gt;
          
          &lt;!-- Bootstrap CSS --&gt;
         &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot; crossorigin=&quot;anonymous&quot;&gt;
        
         &lt;!--  Code for jQuery  --&gt;
         &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot; integrity=&quot;sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
         
                     &lt;!--  Bootstrap Bundle with Popper --&gt;
         
         &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          
         &lt;!-- Code for FontAwesome --&gt;
         &lt;link href=&quot;Desktop/FontAwesome/fontawesome-free-icons/css/all.css&quot; rel=&quot;stylesheet&quot;&gt;    
          
          &lt;title&gt;Project App Landing Page&lt;/title&gt;
          
          &lt;style type=&quot;text/css&quot;&gt;
              
              .jumbotron{
                  
                  background-image: url(blueSky.jpg);
                  min-height: 450px;
                  text-align: center;
              }
              
              #appSummary {
                  
                  text-align: center;
                  margin-top: 50px;
                  margin-bottom: 50px;
              }
              
          &lt;/style&gt;    
      &lt;/head&gt;
      &lt;body&gt;
          
          &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
            &lt;div class=&quot;container-fluid&quot;&gt;
              &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;MyApp&lt;/a&gt;
              &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
              &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                    &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                    &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li class=&quot;nav-item&quot;&gt;
                    &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Download The App&lt;/a&gt;
                  &lt;/li&gt;        
                &lt;/ul&gt;
  
                &lt;form class=&quot;d-flex&quot;&gt;
                   &lt;div class=&quot;col-xs-4&quot;&gt; 
                      &lt;input class=&quot;form-control&quot; type=&quot;email&quot; placeholder=&quot;Email&quot; aria-label=&quot;Email&quot;&gt;
                      &lt;input class=&quot;form-control&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; aria-label=&quot;password&quot;&gt;  
                      &lt;button class=&quot;btn btn-success&quot; type=&quot;submit&quot;&gt;Log in&lt;/button&gt;
                    &lt;/div&gt;    
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
         &lt;/nav&gt;
          
         &lt;div class=&quot;jumbotron&quot;&gt;
  
             &lt;h1 class=&quot;display-3&quot; &gt;My Awesome App!&lt;/h1&gt;
             &lt;p class=&quot;lead&quot;&gt;This is why YOU should download this fantastic app!&lt;/p&gt;
             &lt;hr class=&quot;m-y-2&quot;&gt;
             &lt;p&gt;Want to know more? Join our mailing list!&lt;/p&gt;       
  
             &lt;form&gt;
                 &lt;div class=&quot;input-group mb-3&quot;&gt;
                    &lt;span class=&quot;input-group-text&quot;&gt;@&lt;/span&gt;
                    &lt;input type=&quot;email&quot; id=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Your email&quot; aria-label=&quot;Email&quot; aria-describedby=&quot;basic-addon1&quot;&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary btn-md&quot;&gt;Sign up&lt;/button&gt; 
                 &lt;/div&gt;          
             &lt;/form&gt;       
          &lt;/div&gt;
          
          &lt;div class=&quot;container&quot;&gt;
              
              &lt;div class=&quot;row&quot; id=&quot;appSummary&quot;&gt;
                  
                  &lt;h1&gt;Why This App Is Awesome&lt;/h1&gt;
                  &lt;p class=&quot;lead&quot;&gt;Summary, once again, of your app's awesomeness&lt;/p&gt;            
              &lt;/div&gt;
              &lt;div class=&quot;row row-cols-1 row-cols-md-3 g-4&quot;&gt;
                &lt;div class=&quot;col&quot;&gt;
                  &lt;div class=&quot;card h-100&quot;&gt;
                    &lt;img src=&quot;cardPic.png&quot; class=&quot;card-img-top&quot; alt=&quot;Card Image&quot;&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
                      &lt;h5 class=&quot;card-title&quot;&gt;&lt;i class=&quot;fas fa-radiation-alt&quot;&gt;&lt;/i&gt;Card title&lt;/h5&gt;
                      &lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;card-footer&quot;&gt;
                      &lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col&quot;&gt;
                  &lt;div class=&quot;card h-100&quot;&gt;
                    &lt;img src=&quot;cardPic.png&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
                      &lt;h5 class=&quot;card-title&quot;&gt;&lt;i class=&quot;far fa-heart&quot;&gt;&lt;/i&gt;Card title&lt;/h5&gt;
                      &lt;p class=&quot;card-text&quot;&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;card-footer&quot;&gt;
                      &lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col&quot;&gt;
                  &lt;div class=&quot;card h-100&quot;&gt;
                    &lt;img src=&quot;cardPic.png&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
                      &lt;h5 class=&quot;card-title&quot;&gt;&lt;i class=&quot;fas fa-pump-medical&quot;&gt;&lt;/i&gt;Card title&lt;/h5&gt;
                      &lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;card-footer&quot;&gt;
                      &lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
           
          &lt;div class=&quot;container&quot;&gt;
              
              &lt;div class=&quot;row&quot;&gt;           
              &lt;/div&gt;                
          &lt;/div&gt;    
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>