How to layout adaptively 7 elements in bootstrap?

Question

css

Greetings, I ask for help from professionals. There is a need to place 7 elements in one row, elements of approximately 140 width 500 height. The bottom line: there is a psd layout where the elements of those same 7 pieces do not all have the same width and are arranged so that they just look even. How can I lay out these 7 elements evenly and make them responsive? I’ll clarify: I think it’s possible to make 7 elements adaptively by automatically setting the width at different resolutions using javascript, for example. But I don't think I'm thinking correctly. Correct, point to the true path. Peace for everyone.

Answer 1

frontender.info/a-guide-to-flexbox

Answer 2

do

<style>
.my_7 {
width: 14.285%;
float: left;
...
}
</style>
<div class="row">
<div class="my-7"></div>
<div class="my-7"></div>
...
<div class="my-7"></div>
</div>