Set container to 50% width

Question

I like the Masonry style effect on this example.

CodePen: https://codepen.io/anon/pen/dZxxjm

Is it possible to set the container width to 50% and still get the same effect of box alignment?

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 40em;
 -webkit-column-width: 40em;
 -moz-column-gap: .5em;
 -webkit-column-gap: .5em; 
  
}

.panel {
 display: inline-block;
 margin:  .5em;
 padding:  0; 
 width:98%;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <h3>Masonry CSS with Bootstrap Panels</h3>
  <div class="row">
    <div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
	<div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
	<div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
    <div class="panel panel-default">
 		<div class="panel-heading">Panel</div>
 		<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Aliquam in felis sit amet augue.</div>
 	</div>
	<div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orc. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
	<div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">Content here.. 
        Aliquam in felis sit amet augue.</div>
 	</div>
	<div class="panel panel-default">
 		<div class="panel-heading">Panel</div>
 		<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
	<div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">ng elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
</div>
</div>

Answer 1

Sure there is.

However, I must outline overriding .row and .panel classes like this will pretty much break layout functionality of Bootstrap. You're better off adding your custom class (used .columns below but feel free to rename it) to this section making sure these overrides don't affect the rest of your website. Anyways, here's what you probably want:

.columns *, .columns *:before, .columns *:after {box-sizing:  border-box !important;}


.row.columns {
 -moz-column-width: 2;
 -webkit-column-width: 2;
 -moz-column-gap: .5em;
 -webkit-column-gap: .5em; 
  columns: 2;
  padding: 0 15px;
}

.columns .panel {
 display: inline-block;
 margin:  .5em;
 padding:  0; 
 width: calc(100% - 15px);
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <h3>Masonry CSS with Bootstrap Panels</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="row columns">
        <div class="panel panel-default">
 		    <div class="panel-heading">Title</div>
 		    <div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.
        </div>
 	    </div>
	    <div class="panel panel-default">
 		    <div class="panel-heading">Title</div>
 		    <div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.
        </div>
   	</div>
	  <div class="panel panel-default">
 		  <div class="panel-heading">Title</div>
 		  <div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	  </div>
    <div class="panel panel-default">
 		  <div class="panel-heading">Panel</div>
 		  <div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Aliquam in felis sit amet augue.</div>
 	  </div>
	  <div class="panel panel-default">
 		  <div class="panel-heading">Title</div>
 		  <div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orc. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	  </div>
	  <div class="panel panel-default">
 		  <div class="panel-heading">Title</div>
 		  <div class="panel-body">Content here.. 
        Aliquam in felis sit amet augue.</div>
 	  </div>
	  <div class="panel panel-default">
 		  <div class="panel-heading">Panel</div>
 		  <div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	  </div>
	  <div class="panel panel-default">
 		<div class="panel-heading">Title</div>
 		<div class="panel-body">ng elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</div>
 	</div>
</div>
</div></div></div>

If it's not, you most likely need to clarify what you want to achieve.

Answer 2

Do you mean something like this?

If this is what you want, just add width:50%; to the row class (see picture).

If this is not what you want, please detail better.