It is necessary to make such a tile: http://a4.mzstatic.com/us/r30/Purple5/v4/71/50/d2/7150d2bc-3375-6d98-569c-94ffee574b08/screen568x568.jpeg two squares filled with paint 50/50 with centered text (as shown). In bootstrap there are two columns col-xs-6, but how to make the height vary proportionally to the width and that the text accordingly also be centered relative to the size of the tile?

    1 answer 1

    There are several solutions (at least two), an option with css: 1. Assign text alignment to the center text-align: center; 2. in the example below it is not entirely successful that the text, but you seem to have fixed content with icons and there should be no problems. assign columns to the columns:? vw 0? vw 0 ;. in place of the questions, put the values ​​selected by the method of scientific typing :) (in the plan you select the image to be centered, in the browser this is done without problems) 3. if necessary, correct the padding on some resolutions using @media queries.

    <div style="background: red;"> <div class="col-md-6 col-sm-6 col-xs-6" style="background: aqua; text-align: center; padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div> <div class="col-md-6 col-sm-6 col-xs-6" style="background: aquamarine; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div> <div class="col-md-6 col-sm-6 col-xs-6" style="background: beige; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div> <div class="col-md-6 col-sm-6 col-xs-6" style="background: blueviolet; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div> <div class="col-md-6 col-sm-6 col-xs-6" style="background: aquamarine; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div> <div class="col-md-6 col-sm-6 col-xs-6" style="background: cyan; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>

    The second method is tied to jQuery, but it is more complicated and more clumsy. if necessary, I can then roughly describe the logic

    • Why use jquery if you can do everything based on bootstrap and native css? - Urmuz Tagizade
    • therefore, I did not describe it, just there is an option if there is nothing to do :). no need to set the framework, you must have freedom of maneuver) - aleksandr revenko
    • I understood with alignment, but how to make it so that the height filled with a certain color col-xs-6 equals its width, forming a square? If you put vh by eye, then when you change the screen - the height starts to vary with the width and the proportions of the square disappear (the text aligned in the center also flies out if vh stands). - lif3ar
    • 1vw = 1% of the window width. When reducing the width of the window, decreases the width, height, font of the element. 1vh = 1% of the window height. When reducing the height of the window, decreases the width, height, font element. use vw in padding, it should work :). - aleksandr revenko