CODEWITHSUNDEEP
cssflexboxtwitter-bootstrap-4
Vitaly Protasov
Vitaly Protasov

Reputation: 179

flexbox stretching inside container

I'm trying to align 2 figure inside container.

Here is jade/pug layout.

.container-fluid
    section#feeds_container
            section.row
                section.col-sm-12.d-flex
                        figure#pagination_up.d-flex.justify-content-center
                        figure#button_wrapper.d-flex.justify-content-end

Tried align-self-center and end but unable to position the two elements, one in center at max width and other at right.

Please help.

Upvotes: 0

Views: 144

Answers (1)

Gibin Ealias
Gibin Ealias

Reputation: 2859

The justify-content property is supposed to be set to the parent element to which the display: flex is applied, which is section.col-sm-12 in this case.

However, you don't need to set it to achieve your desired output and instead, add the class mx-auto to the first <figure> element.

.container-fluid
    section#feeds_container
            section.row
                section.col-sm-12.d-flex
                        figure#pagination_up.mx-auto First figure here
                        figure#button_wrapper Second figure here

CODEPEN

Hope this helps.

Upvotes: 2

Related Questions