aka aka - 4 months ago 36
HTML Question

How to make shape like rectangle and text inside it can be responsive using bootstrap?

I am having hard time to make shape like rectangle and square to make it responsive as i have to use media query to make it responsive.
which bootstrap class is better to use to create rectangle,square block so block can be responsive as well as text inside should responsive?
i want to try to achieve like below mentioned in image. i am new to web. please advise. i would like to use bootstrap so it can be responsive rather making changes to css.

enter image description here

Answer

.rect{  
  margin:0 0 20px;
  padding: 20px;
  border:2px solid #333;
  width 80%;
  text-align:center;
}
.header{
   margin:0 auto;
   padding: 5px 10px;
   width:90%;
   border:2px solid #333;
}
.box{
  margin: 5px 0;
  border:2px solid #333;
}
.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="rect">
  <div class="header">
    <h4>Some Header Text</h4>
  </div>
</div>
<div class="rect">
  <div class="col-md-4 col-xs-6 box">
    <h4>Lorem Ipsum</h4>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  </div>
  <div class="col-md-4 col-xs-6 box">
    <h4>Lorem Ipsum</h4>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
   </div>
  <div class="clearfix"></div>
</div>