Clever Geek Handbook

How can I achieve the desired floats in Bootstrap?

I am trying to create a page using bootstrap. I want to create the layout that I see on many marketing pages, something like this:

example layout

I am currently setting the float and margins manually and am getting some winning results. The text does not wrap around the image because the page resizes and does not stay upright to match the window. Finally, when the page is resized / if a mobile user accesses the page, it should respond like this:

  • Picture
  • Paragraph
  • Horizontal rule
  • Picture
  • Paragraph
  • Horizontal rule
  • Etc ...

Instead, with my current HTML, I get the following on mobile:

  • Picture
  • Paragraph
  • Horizontal rule
  • Paragraph
  • Picture
  • Horizontal rule
  • Etc ...

Here's the code I have so far :

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <img class="do-icon-left img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
    </div>
    <div class="clearfix"></div>
    <hr>
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <p class="do-feature-left">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
      <img class="do-icon-right img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
    </div>
  </div>
</div>

      

        
        
        
      

    
.do-icon-left {
  float:left;
  margin-right: 100px;
  width:287px;
}
p.do-feature {
  margin-top:120px;
}
p.do-feature-left {
  float: left;
  margin-right: 100px;
  width:350px;
}
.do-icon-right {
  width: 287px;
  float:right;
}

Here's a demo at jsFiddle

How can I create this correctly using Bootstrap classes for ease?

+3


source to share


1 answer


However, you arrange the elements in the DOM as they appear in mobile mode. So if you want the image to be the first, you need to place the image first. Then, on wider screens, press or drag the images to the side.

To do this, you will want to examine the order of the columns with col-*-push-*

andcol-*-pull-*

Demonstration in stack fragments



.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #278382;
}
      

        
        
        
      

    
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2 col-md-push-10">
      <div class="circle"></div>
    </div>
    <div class="col-md-10 col-md-pull-2">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

  </div>
</div>
Run code


+2


source






More articles:


All Articles