Add space between items with w3.css

Question

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/

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.

Padding works but not as you intended. Please read more about CSS box model. For eg. here -> https://www.w3schools.com/css/css_boxmodel.asp — Mihai T, Sep 15 '18 at 07:00
can you please send the css. As i have checked you HTML with Default w3.css. It is working fine. Please check the link. https://jsfiddle.net/ckvgo7fd/ — Gurmatpal, Sep 17 '18 at 10:02

score 1 · Answer 1 · answered Sep 15 '18 at 07:13

1

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

answered Sep 15 '18 at 07:13

Sunil Sheokand

25
3

score 1 · Answer 2 · answered Sep 15 '18 at 07:44

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>

score 0 · Answer 3 · answered Sep 15 '18 at 06:58

0

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.

answered Sep 15 '18 at 06:58

Kevin He

1,210
8
19

Add space between items with w3.css

3 Answers3