CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Alireza Amrollahi
Alireza Amrollahi

Reputation: 1

how yo seprate elements in divs

i have some problem with the divs . i wanted to have 3 divs in each row but i can't . here is the code and the result 

   <div  class="col-md-4 col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
   </div>

    <div  class=" col-md-4 col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>

    <div class="col-md-4 col-sm-4 mamali "  style="background-color: red; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>

   <div  class="col-md-4 col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
   </div>

    <div  class=" col-md-4 col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px; border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>

and for the css :

mamali {
margin-left:190px;
margin-right:-120px;
margin-top:50px;
}

enter image description here

Upvotes: 0

Views: 34

Answers (2)

FelipeAls
FelipeAls

Reputation: 22171

Bootstrap Grid needs a .container and a .row around grid elements. Here's a Bootply with the needed modifications and below (to be seen full page ^^^)

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • (…)

Also Bootstrap is mobile first so you don't need .col-md-4 (medium resolution and up) if it's already defined as .col-sm-4 (width of 4/12th in small and above so also medium)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>

    <div class="col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>

    <div class="col-sm-4 mamali " style="background-color: red; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>

   <div class="col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
   </div>

    <div class="col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px; border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;">
    </div>
  </div>
</div>

Upvotes: 1

Hebert Orofino
Hebert Orofino

Reputation: 16

You are looking for a typical behavior of inline elements but you are using the "div" block element. The main reason why you do not achieve the desired goal is because, by definition, the block elements occupy the entire space of the line. One of the many solutions is instead of block elements use inline elements like as "span" In this way you can achieve the desired effect without losing the possibility of formatting.- Here is a link with a clearly and detail explanation: http://www.campusmvp.es/recursos/post/Que-diferencias-hay-entre-display-block-inline-e-inline-block-en-CSS.aspx

Upvotes: 0

Related Questions