CODEWITHSUNDEEP
cssw3.css
Craig
Craig

Reputation: 18694

Add space between items with w3.css

I'm trying to make a group of buttons, but when trying this, the buttons have no gaps between them.

<div className="w3-row">
            <div className="w3-col w3-right-align">
              <button className="w3-btn w3-blue w3-padding w3-round" onClick={this.previewImage} >Preview</button>
              <button className="w3-btn w3-green w3-padding w3-round" href="#" to="#">Generate PDF</button>
              <button className="w3-btn w3-red w3-padding w3-round" href="#" to="#">Delete</button>
              <button className="w3-btn w3-green w3-padding w3-round" href="#" to="#">Save</button>
              <Link className="w3-btn w3-blue w3-padding w3-round" href="#" to="#">Cancel</Link>
            </div>
          </div>

This puts the buttons down, but without any gaps. I don't really want gaps on the right of the cancel button, as it aligns nicely with a box on the right of the screen.I really just want gaps ebtween each button. Is this possible with w3.css/

enter image description here Whats the correct way to have some padding between each button, and have them next to each other?

I thought the w3-padding attribute would work, but as you see - it doesn't.

Upvotes: 2

Views: 1836

Answers (3)

Andrea Peekatchu Follack
Andrea Peekatchu Follack

Reputation: 153

I don't know w3.js but this is a similar affect achieved with regular css, to me it just seems like alot less to type once you get over the initial learning curve of flexbox, and it took only a min or 2 to implement. 

.btn-group {
  display: flex;
  justify-content: flex-end;
}

.btn {
  margin-left: 5px;
  padding: 5px;
  border-radius: 5px;
}

.primary {
  background: cornflowerblue;
}

.danger {
  background: red;
}

.action {
  background: green;
}
<div class="btn-group">
  <button class=" btn primary">Preview</button>
  <button class="btn action">Generate PDF</button>
  <button class="btn danger">
Delete
</button>
  <button class="btn action">
Save
</button>
  <button class="btn primary">
Cancel
</button>
</div>

Upvotes: 1

Sunil Sheokand
Sunil Sheokand

Reputation: 25

Just add one more class "w3-margin-left"

Upvotes: 1

Kevin He
Kevin He

Reputation: 1250

Use margin instead. Padding goes inside, margins are on the outside. In this case I would suggest giving flexbox a try and use justify-content: space-between to achieve evenly distributed and fluid content.

Upvotes: 0

Related Questions