title: Bootstrap responsive on mobile devices
body: <p>How can I set automatic line breaks on mobile devices? At the moment my code looks like:
  <strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container-fluid bg-1 text-center"&gt;
      &lt;h2&gt;MessageOfTheDay&lt;/br&gt;
      &lt;/br&gt;&lt;/h2&gt;
      &lt;p style="margin-bottom: 100px;"&gt;SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR&lt;/p&gt;
      &lt;h1 style="margin-bottom: 100px;"&gt;XXXXXX&lt;/br&gt;
      SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR&lt;/br&gt;
      SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR&lt;/h1&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.bg-1{ 
  background-color: black;
  background-size: cover;
  color: #ffffff;
  height: auto; 
  min-height:620px;
  padding:10px;
  margin-top:0px;}
  
  body {
      font: 20px "Montserrat", sans-serif;
      color: #f5f6f7;}
  
  p {font-size: 20px;}
  
  .margin {margin-bottom: 10px;}
  
  h1,h2,h3{    
      margin-top: 0px;
      margin-bottom: 0px;}
  
  .container-fluid{
      padding-top: 20px;
      padding-bottom: 0px;}
  
  h1{font-size: 50px;}
  </code></pre>
  
  <p>How can I fix truncate text? I want set automatic brake line on mobile.</p>
  
  <p><a href="http://i.stack.imgur.com/ONdHQ.jpg" rel="nofollow">Image</a></p>