title: Bootstrap image carousel, with text to the right
body: <p>Okay, so I'm trying to get a webpage to show a <a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow">Bootstrap image carousel</a>, which works! But I want some text to the right of it. I'm not trying to get the text to change with the image, just be to the side.</p>
  
  <p>Here is the HTML for the page;<br>
  <a href="http://pastebin.com/EabGfv3H#" rel="nofollow">http://pastebin.com/EabGfv3H#</a></p>
  
  <p>And here is the custom CSS I'm using;<br>
  <a href="http://pastebin.com/MEtF1hTR" rel="nofollow">http://pastebin.com/MEtF1hTR</a></p>
  
  <p>And a JSFiddle;<br>
  <a href="http://jsfiddle.net/swfour/52VtD/3942/" rel="nofollow">http://jsfiddle.net/swfour/52VtD/3942/</a></p>
  
  <p>Needed code for JSFiddle link, so here is the html;</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div id="carousel" class="carousel slide" data-ride="carousel"&gt;
          &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#carousel" data-slide-to="1"&gt;&lt;/li&gt; 
                  &lt;li data-target="#carousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                  &lt;div class="item active"&gt;
                      &lt;img src="images/Beaches and Villages\Golden Beach umbrellas home.JPG" alt="..."&gt;
                      &lt;div class="carousel-caption"&gt;
                          Golden Beach
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="images/Beaches and Villages\Limenas ancient city.jpg" alt="..."&gt;
                      &lt;div class="carousel-caption"&gt;
                          Limenas
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="images/Beaches and Villages\Potos sunset.JPG" alt="..."&gt;
                      &lt;div class="carousel-caption"&gt;
                          Potos
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Controls --&gt;
              &lt;a class="left carousel-control" href="#carousel" role="button" data-slide="prev"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="right carousel-control" href="#carousel" role="button" data-slide="next"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
              &lt;div id="carousel_text" class="col-md-6"&gt;
          &lt;div&gt;
              &lt;p&gt;
                  Thasos, an island surrounded by the crystal-clear emerald waters of the Aegean Sea is part of the Northeastern islands of 
                  Greece, also being the closest one to the continent. It is the perfect getaway for holidays during summer, a place where 
                  you can relax and enjoy your holidays, forget about all your worries on a quiet sandy beach, but also a place where you 
                  can explore the Greek way of life, try the best foods and meet the most amazing people.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I've tried not using the bootstrap columns and just using float left and right, which didn't work.</p>