CODEWITHSUNDEEP
twitter-bootstrapflexboxbootstrap-4
Caverman
Caverman

Reputation: 3707

Boostrap 4 Flexbox Row is showing in columns as apposed to rows?

I have the following code and based on the examples I've found it looks as though this should be writing them out in horizontal rows but it's actually being rendered into columns? 

<div class="d-flex">
    <div class="flex-row">
        <div class="p-2">January</div>
        <div class="p-2">February</div>
        <div class="p-2">March</div>
        <div class="p-2">April</div>
    </div>
    <div class="flex-row">
        <div class="p-2">May</div>
        <div class="p-2">June</div>
        <div class="p-2">July</div>
        <div class="p-2">August</div>
    </div>
    <div class="flex-row">
        <div class="p-2">September</div>
        <div class="p-2">October</div>
        <div class="p-2">November</div>
        <div class="p-2">December</div>
    </div>
</div>

enter image description here

Upvotes: 0

Views: 25

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

"Flexbox Row is showing in columns as apposed to rows?"

Because flex-row is not display:flex. The flex-row should be in the same element as d-flex:

<div>
    <div class="d-flex flex-row">
            <div class="p-2">January</div>
            <div class="p-2">February</div>
            <div class="p-2">March</div>
            <div class="p-2">April</div>
    </div>
    <div class="d-flex flex-row">
            <div class="p-2">May</div>
            <div class="p-2">June</div>
            <div class="p-2">July</div>
            <div class="p-2">August</div>
    </div>
    <div class="d-flex flex-row">
            <div class="p-2">September</div>
            <div class="p-2">October</div>
            <div class="p-2">November</div>
            <div class="p-2">December</div>
    </div>
</div>

https://www.codeply.com/go/HnEbrelWCC

Upvotes: 1

Related Questions