title: How can i apply bootstrap in my website? ASP.NET, C#
body: <p>I have design a website which working fine regarding to design in desktop pc/laptop screen,but it's not working well in mobile and tablets devices.I'm using "responsive web design tester" google chorme add one to check this.It's middle contents changes.
  How can i apply bootstrap in my website??I just include links of bootstrap or change the whole design.I'm beginner,I don't know how to apply "bootstrap".I have installed "Bootstrap" by using  “Manage NuGet Package". Here is my solution explore snapshot </p>
  
  <p><a href="https://i.stack.imgur.com/mV6WW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mV6WW.png" alt="image"></a></p>
  
  <p>Here is my desktop view some content
   <a href="https://i.stack.imgur.com/ZIUSd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZIUSd.png" alt="image"></a> 
  Here mobile view 
     <a href="https://i.stack.imgur.com/wAKhX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wAKhX.png" alt="image"></a>
  Here is my aspx code ,specific part of code in which the content not working well :</p>
  
  <pre><code>&lt;section id="about"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;div class="title-area"&gt;
                          &lt;h2 class="title"&gt;About us&lt;/h2&gt;
                          &lt;span class="line"&gt;&lt;/span&gt;
                          &lt;p&gt;
                              UpSkill blends scientifically approved principles of learning and the best quality content to boost personal learning!
                              We aim to be the hub of quality education for personal growth and individual learning for a successful career!
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;!-- end about --&gt;
      &lt;!--Courses Start Here--&gt;
  
      &lt;section id="our-team"&gt;
  
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
  
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="title-area"&gt;
                              &lt;h2 class="title"&gt;Our Courses&lt;/h2&gt;
                              &lt;span class="line"&gt;&lt;/span&gt;
                              &lt;p&gt;Search Courses as you want to study and Learn from our best Team!&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="our-team-content"&gt;
                              &lt;div class="container"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;!-- Start single Course --&gt;
                                      &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                                          &lt;div class="single-team-member"&gt;
                                              &lt;div class="team-member-img"&gt;
                                                  &lt;img src="assets\images\courses\linux.png" alt="linux img"&gt;
                                              &lt;/div&gt;
                                              &lt;div class="team-member-name"&gt;
  
                                                  &lt;p style="position: relative; left: 7px; font-size: 25px;"&gt;Introduction to Linux &lt;/p&gt;
  
                                                  &lt;span style="position:relative; left:7px"&gt;CS250&lt;/span&gt;
  
                                              &lt;/div&gt;
                                              &lt;p&gt;&lt;/p&gt;
                                          &lt;/div&gt;
                                          &lt;!--    &lt;div class="team-member-link"&gt;
                                    &lt;a class="read-btn wow fadeInUp" href="#"&gt;&lt;font color="black"&gt;&lt;/font&gt;&lt;/a&gt;
                                  &lt;/div&gt; --&gt;
                                      &lt;/div&gt;
                                      &lt;!-- Start single Course  --&gt;
                                      &lt;!-- Start single Course  --&gt;
                                      &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                                          &lt;div class="single-team-member"&gt;
                                              &lt;div class="team-member-img"&gt;
                                                  &lt;img src="assets\images\courses\asp-net.png" alt="asp.net img"&gt;
                                              &lt;/div&gt;
                                              &lt;div class="team-member-name"&gt;
                                                  &lt;p style="position: relative; left: 7px; font-size: 25px;"&gt;Introduction to Asp.net&lt;/p&gt;
                                                  &lt;span style="position:relative; left:7px"&gt;CS250&lt;/span&gt;
                                              &lt;/div&gt;
                                              &lt;p&gt;&lt;/p&gt;
                                          &lt;/div&gt;
                                          &lt;!--&lt;div class="team-member-link"&gt;
                                    &lt;a class="read-btn wow fadeInUp" href="#"&gt;&lt;font color="black"&gt;&lt;/font&gt;&lt;/a&gt;
                                  &lt;/div&gt;--&gt;
                                      &lt;/div&gt;
                                      &lt;!-- Start single Course  --&gt;
                                      &lt;!-- Start single Course  --&gt;
                                      &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                                          &lt;div class="single-team-member"&gt;
                                              &lt;div class="team-member-img"&gt;
                                                  &lt;img src="assets\images\courses\php.png" alt="php img"&gt;
                                              &lt;/div&gt;
                                              &lt;div class="team-member-name"&gt;
                                                  &lt;p style="position: relative; left: 7px; font-size: 25px;"&gt;Introduction to PHP&lt;/p&gt;
                                                  &lt;span style="position:relative; left:7px"&gt;CS250&lt;/span&gt;
                                              &lt;/div&gt;
                                              &lt;p&gt;&lt;/p&gt;
                                          &lt;/div&gt;
                                          &lt;!--&lt;div class="team-member-link"&gt;
                                    &lt;a class="read-btn wow fadeInUp" href="#"&gt;&lt;font color="black"&gt;&lt;/font&gt;&lt;/a&gt;
                                  &lt;/div&gt;  --&gt;
                                      &lt;/div&gt;
                                      &lt;!-- Start single Course  --&gt;
                                      &lt;!-- Start single Course  --&gt;
                                      &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                                          &lt;div class="single-team-member"&gt;
                                              &lt;div class="team-member-img"&gt;
                                                  &lt;img src="assets\images\courses\html.png" alt="html img"&gt;
                                              &lt;/div&gt;
                                              &lt;div class="team-member-name"&gt;
                                                  &lt;p style="position: relative; left: 7px; font-size: 25px;"&gt;Introduction to HTML5&lt;/p&gt;
                                                  &lt;span style="position:relative; left:7px"&gt;CS250&lt;/span&gt;
                                              &lt;/div&gt;
  
                                              &lt;p&gt;&lt;/p&gt;
                                          &lt;/div&gt;
  
                                      &lt;/div&gt;
                                      &lt;!-- Start single Course member --&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
  
                  &lt;button style="position:relative; left:1170px; color:black; font-size:18px; width:130px; height:60px;"&gt;See More&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p>"About" and "Our Courses" also working well in mobile devices,but problem with blow code.
  Here is my bootstrap.css code :</p>
  
  <pre><code>      .container {
        padding-right: .9375rem;
       padding-left: .9375rem;
       margin-right: auto;
      margin-left: auto;
       }
  
       .container::after {
         display: table;
         clear: both;
         content: "";
       }
  
    @media (min-width: 544px) {
      .container {
       max-width: 576px;
     }
     }
  
     @media (min-width: 768px) {
     .container {
      max-width: 720px;
    }
    }
  
     @media (min-width: 992px) {
      .container {
     max-width: 940px;
    }
   }
  
    @media (min-width: 1200px) {
   .container {
     max-width: 1140px;
   }
   }
  
   .container-fluid {
    padding-right: .9375rem;
    padding-left: .9375rem;
   margin-right: auto;
   margin-left: auto;
  }
  
  .container-fluid::after {
    display: table;
    clear: both;
    content: "";
  }
  
   .row {
    margin-right: -.9375rem;
    margin-left: -.9375rem;
  }
  
    .row::after {
    display: table;
     clear: both;
     content: "";
   }
  
     .col-xs-1, .col-xs-2, .col-xs-3,
    .col-xs-4, .col-xs-5, .col-xs-6, 
   .col-xs-7, .col-xs-8, .col-xs-9,
    .col-xs-10, .col-xs-11, .col-xs-12, 
   .col-sm-1, .col-sm-2, .col-sm-3,
    .col-sm-4, .col-sm-5, .col-sm-6, 
   .col-sm-7, .col-sm-8, .col-sm-9, 
    .col-sm-10, .col-sm-11, .col-sm-12,
   .col-md-1, .col-md-2, .col-md-3, 
   .col-md-4, .col-md-5, .col-md-6,
   .col-md-7, .col-md-8, .col-md-9,   
   .col-md-10, .col-md-11,
  .col-md-12, .col-lg-1, .col-lg-2,
  .col-lg-3,   .col-lg-4, .col-lg-5, .col-lg-6, 
  .col-lg-7, .col-lg-8, .col-lg-9,  
   .col-lg-10, .col-lg-11, .col-lg-12,
   .col-xl-1, .col-xl-2, .col-xl-3,  
    .col-xl-4, .col-xl-5, .col-xl-6,
    .col-xl-7,.col-xl-8, .col-xl-9,   
    .col-xl-10, .col-xl-11, .col-xl-12 {
      position: relative;
      min-height: 1px;
      padding-right: .9375rem;
     padding-left: .9375rem;
     }
  
   .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, 
  .col-xs-5, .col-xs-6,    .col-xs-7, 
   .col-xs-8, .col-xs-9,
  .col-xs-10, .col-xs-11, .col-xs-12 {
   float: left;
   }
  
  .col-xs-1 {
   width: 8.333333%;
    }
   .col-xs-2 {
   width: 16.666667%;
    }
  
    .col-xs-3 {
    width: 25%;
    }
  
   .col-xs-4 {
    width: 33.333333%;
   }
  
    .col-xs-5 {
   width: 41.666667%;
   }
  
   .col-xs-6 {
   width: 50%;
  }
  
  .col-xs-7 {
   width: 58.333333%;
  }
  
    .col-xs-8 {
      width: 66.666667%;
    }
  
    .col-xs-9 {
     width: 75%;
    }
  
    .col-xs-10 {
     width: 83.333333%;
    }
  
     .col-xs-11 {
     width: 91.666667%;
    }
  
     .col-xs-12 {
     width: 100%;
  
    }
  </code></pre>
  
  <p>How can i apply "Bootstrap" on my website?Which works well in every device.
  Thanks..</p>