How to move columns without compressed text in Bootstrap

Profile picture for RS92
RS92

I'm trying to move the margin of column, but after that my text is compressed.on this paragraph <p>James plays tug-o-war on the beach with Jasmine.</p> for the following HTML:

<!-- language: lang-html --> 
<div class="row5">
  <div class="col-lg-8 col-md-8 col-sm-7 col-xs-12">
    <h2> WELCOME </h2>
    <p class="p1"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. </p>
    <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-5 col-xs-12">
    <h2>ABOUT</h2>

    <div class="row">

      <div class="col-xs-6">
        <img src="img/avatar.png" alt="" class="img-responsive pull-right">
      </div>

      <div class="col-xs-6">
        <p>James plays tug-o-war on the beach with Jasmine.</p>
      </div>

    </div>
  </div>
</div> <!-- End row 5 -->

I tried this, but after that text is compressed.

<!-- language: lang-css --> 
.row5 .row{
  margin-right: 5em;
}

I want to move jointly two columns, but without text compressed. You know from the code, first column is a picture, second is text.

It looks like what you want to do is shift the entire row the left by 5em. That's not precisely what margin-right: 5em; does. Margin-right will reduce the entire size of the .row. The columns will then take up 50% of a smaller available area.

To do what you're trying to do, you can use the translateX transform like this:

<!-- language: lang-css --> 
.myRow {
  transform: translateX(-5em);
}

Example

Example

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-css --> 
.myRow {
  transform: translateX(-5em);
}
<!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="row5">
  <div class="col-lg-8 col-md-8 col-sm-7 col-xs-12">
    <h2> WELCOME </h2>
    <p class="p1"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. </p>
    <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-5 col-xs-12">
    <h2>ABOUT</h2>

    <div class="row myRow">

      <div class="col-xs-6">
        <img src="http://i.imgur.com/6KUnmtF.png" alt="" class="img-responsive pull-right">
      </div>

      <div class="col-xs-6">
        <p>James plays tug-o-war on the beach with Jasmine.</p>
      </div>

    </div>
  </div>
</div> <!-- End row 5 -->
<!-- end snippet -->

2D transforms will work on almost all browsers except ie8