example

Is it possible to organize such a thing on the bootstrap like in the picture above, or is he powerless here and better purely on css?

Closed due to the fact that the essence of the issue is not clear to the participants of VenZell , aleksandr barakin , D-side , zRrr , user194374 17 May '16 at 7:46 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    bootstrap not css ? :) Well, you have 3 columns here, this is a col-md-4 class you hang on each block, and you get 3 identical columns in a row. - Vasily Barbashev
  • Here is an example - jsfiddle.net/dh3mLpch - I use 24 grids - soledar10
  • @ soledar10 tin, why not? jsfiddle.net/m8jjgvyr/1 you have the wildest dirt if you write like that. Why are you doing incomprehensible under the levels? when the bootstrap itself is translated a new line if the column goes outside - Vasily Barbashev
  • if icons are sprite - it is possible and so - soledar10
  • + if i make an extra div, is it dirt? - soledar10

2 answers 2

It is not clear what exactly you mean by the words "such a thing", but here's an example.

 html body { background-color: #018287; color: white; } .media > .media-body > .media-heading { color: black; font-weight: 600; font-size: 20px } .glyphicon-lg { font-size: 65px; padding: 7px; border: 2px dashed white; } .col-ident { margin-bottom: 20px } 
 <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-6 col-ident"> <div class="media"> <div class="media-left media-middle"> <span class="glyphicon glyphicon-fire glyphicon-lg"></span> </div> <div class="media-body"> <h4 class="media-heading">SOME SERVICE</h4> Text text text text text text text text text text text text text text text text text text </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 col-ident"> <div class="media"> <div class="media-left media-middle"> <span class="glyphicon glyphicon-fire glyphicon-lg"></span> </div> <div class="media-body"> <h4 class="media-heading">SOME SERVICE</h4> Text text text text text text text text text text text text text text text text text text </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 col-ident"> <div class="media"> <div class="media-left media-middle"> <span class="glyphicon glyphicon-fire glyphicon-lg"></span> </div> <div class="media-body"> <h4 class="media-heading">SOME SERVICE</h4> Text text text text text text text text text text text text text text text text text text </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 col-ident"> <div class="media"> <div class="media-left media-middle"> <span class="glyphicon glyphicon-fire glyphicon-lg"></span> </div> <div class="media-body"> <h4 class="media-heading">SOME SERVICE</h4> Text text text text text text text text text text text text text text text text text text </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 col-ident"> <div class="media"> <div class="media-left media-middle"> <span class="glyphicon glyphicon-fire glyphicon-lg"></span> </div> <div class="media-body"> <h4 class="media-heading">SOME SERVICE</h4> Text text text text text text text text text text text text text text text text text text </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 col-ident"> <div class="media"> <div class="media-left media-middle"> <span class="glyphicon glyphicon-fire glyphicon-lg"></span> </div> <div class="media-body"> <h4 class="media-heading">SOME SERVICE</h4> Text text text text text text text text text text text text text text text text text text </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    Bootstrap is possible, but not effective. Is that HTML + CSS.
    You can of course write a snippet for 1 block and spawn it as many times as you need.

    Perhaps in the internet and ready to eat.

    • uh what not effective? on bootstrap? do you even know him well? - Vasily Barbashev
    • I used it repeatedly, the author of the question is interested in what to do as in the screenshot. In his case, bootstrap will not do anything except speakers. - Hromik
    • cross-browser markup it will give! And the question is: может ли бутстрап так делать? . The answer is yes, it can and even is beautiful. And if the booster is connected to the page, it’s better to build the whole interface on it - Vasily Barbashev
    • I'm not saying that the bootstrap is bad. The cause of each is how and what to do, bs for the more lazy. - Hromik
    • 2
      Wow, how are you mistaken :) Ready technology, this is not laziness, but grafting a small standard in the layout, especially cross-browser. So ... laziness is nothing to do with it. It's like webpack, gulp, you want to build each project file by hand? Of course not. The technology is the same. Automation taxising progress - Vasily Barbashev