title: how to connect bootstrap template to sql table?
body: <p>I want to create a asp.net website. I use a bootstrap template. I put the link of that here. <a href="https://shapebootstrap.net/demo/html/evento/index.html#event-carousel" rel="nofollow">https://shapebootstrap.net/demo/html/evento/index.html#event-carousel</a> . I want to connect Event section to sqlserver and the pictures load from the database table. i test that with repeater and datalist control in asp.net but it does not work correctly and the style of template destroy.For example when I used the repeater the pictures load from database but all of them are in one column.
  How can I do that? I create a new section like event section. but I want to connect it to sql server. I searched for it and understand that I should use 2 repeater like 2 for loop and use group by. For example the datatable that load from database has 12 rows. I should devide it for example into 4*3 and connect datatable to repeaters. I do not know how can I do it?   </p>
  
  <pre><code>        &lt;section id="Prefer"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12 col-md-9"&gt;
                  &lt;div id="Prefer-carousel" class="carousel slide" data-interval="false"&gt;
  
                      &lt;h2 class="heading" style="text-align:right;"&gt;Prefer&lt;/h2&gt;
                      &lt;a class="even-control-left" href="#Prefer-carousel" data-slide="prev" &gt;&lt;i class="fa fa-angle-left" &gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a class="even-control-right" href="#Prefer-carousel" data-slide="next"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;div class="carousel-inner"&gt;
                          &lt;div class="item active"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="single-event"&gt;
                                          &lt;img class="img-responsive" src="images/event/event1.jpg" alt="event-image"&gt;
                                          &lt;h4&gt;Chester Bennington&lt;/h4&gt;
                                          &lt;h5&gt;Vocal&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="single-event"&gt;
                                          &lt;img class="img-responsive" src="images/event/event2.jpg" alt="event-image"&gt;
                                          &lt;h4&gt;Mike Shinoda&lt;/h4&gt;
                                          &lt;h5&gt;vocals, rhythm guitar&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="single-event"&gt;
                                          &lt;img class="img-responsive" src="images/event/event3.jpg" alt="event-image"&gt;
                                          &lt;h4&gt;Rob Bourdon&lt;/h4&gt;
                                          &lt;h5&gt;drums&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="single-event"&gt;
                                          &lt;img class="img-responsive" src="images/event/event1.jpg" alt="event-image"&gt;
                                          &lt;h4&gt;Chester Bennington&lt;/h4&gt;
                                          &lt;h5&gt;Vocal&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="single-event"&gt;
                                          &lt;img class="img-responsive" src="images/event/event2.jpg" alt="event-image"&gt;
                                          &lt;h4&gt;Mike Shinoda&lt;/h4&gt;
                                          &lt;h5&gt;vocals, rhythm guitar&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="single-event"&gt;
                                          &lt;img class="img-responsive" src="images/event/event3.jpg" alt="event-image"&gt;
                                          &lt;h4&gt;Rob Bourdon&lt;/h4&gt;
                                          &lt;h5&gt;drums&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="guitar"&gt;
                  &lt;img class="img-responsive" src="images/guitar.png" alt="guitar" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;          
      &lt;/div&gt;
  &lt;/section&gt;&lt;!--/#Prefer--&gt;    
  </code></pre>