Bootstrap - container with two columns and two rows of the same size

Asked

Viewed 2,296 times

0

Boas, I’m trying to make a container with 4 equal cells, that is, 2 columns and 2 rows. I’ve tried using col and Row but nothing works.

I’ve just got this, right now. 

<div id="container">
        <video autoplay="true" id="video"></video>
</div>

bootstrap
  • 1

    Use col and Row and try to make a style with video { width: 100% }

2 answers

1

There’s been a change in the way you build grids of bootstrap 3 to the bootstrap 4

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
        <div class="col">
          coluna (0,1)
        </div>
        <div class="col">
          coluna (0,2)
        </div>   
      <div class="w-100"></div>  
      <div class="col">
          coluna (1,1)
        </div>
        <div class="col">
          coluna (1,2)
       </div>
   </div>
</div>

Check out the documentation: https://getbootstrap.com/docs/4.0/layout/grid/

1

I don’t know which Bootstrap is using, if it is the one before the 4, to do so. Click Run and Whole Page, to view as on desktop screen. 

video {
    margin-top: 20px;
    background-color: #ccc;
    width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	    <div class="row">
	        <div class="col-md-6">
	            <video autoplay="true" id="video1">
	            	<source src="">
	            </video>
	        </div>
	        <div class="col-md-6">
	            <video autoplay="true" id="video2"></video>
	            <source src="">
	        </div>
	    </div>
	    <div class="row">
	        <div class="col-md-6">
	            <video autoplay="true" id="video3"></video>
	            <source src="">
	        </div>
	        <div class="col-md-6">
	            <video autoplay="true" id="video4"></video>
	            <source src="">
	        </div>
	    </div>
	</div>

Browser other questions tagged bootstrap

You are not signed in. Login or sign up in order to post.