CODEWITHSUNDEEP
htmlcssbulma
Nat
Nat

Reputation: 345

How can I have left- and right-aligned content at the same horizontal position in a Bulma modal footer?

I have a modal card in Bulma, and I want to have a left-aligned p tag on one side of the footer, and a right-aligned p tag on the other side, occupying the same horizontal space. The standard classes, like level and columns, don't seem to function correctly in the footer. I have tried a lot of approaches, but this is the most recent.

    <footer class="modal-card-foot">
      <div id="site-type-div" class="columns is-inline-flex">
          <p id="chart-footer" class="level-item">Content</p>
          <p id="site-type-p" class="level-item">Type</p>
      </div>
    </footer>

The two p tags show up in the same horizontal space, but both are left aligned; I want the first on the left and the second on the right.

Upvotes: 2

Views: 3309

Answers (1)

D.V.D.
D.V.D.

Reputation: 257

Will this work? (seems the modal-card-foot class doesn't play well with stuff like level and columns)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> 
    <footer class="">
      <div id="site-type-div" class="level is-mobile">
          <p id="chart-footer" class="level-left">Content</p>
          <p id="site-type-p" class="level-right">Type</p>
      </div>
    </footer>

Added the is-mobile as the snippet is small width and otherwise would display it one under the other.

Update:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> 
    <footer class="modal-card-foot" style="justify-content: space-between;">
      <div id="site-type-div" class="">
          <p id="chart-footer" class="">Content</p>
      </div>
      <div id="site-type-div" class="">
          <p id="site-type-p" class="">Type</p>
      </div>
    </footer>

Seems you need to change the modal-card-foot style to use the justify-content: space-between; and divide them into 2 divs. Info from is-pulled-right in modal-card-footer

Upvotes: 4

Related Questions