How to make these Buttons look similar in Size

user_13959139 0
Viewed 36

I'm quite weak in doing styles at frontend, need your little help guys. I want these Buttons to look equal in Size.

I have following code to correct this to achieve that...

 <div>
  {userInfo && userInfo.isAdmin && (
    <Container>
      <ListGroup variant="">
        <ListGroup.Item>
          <a href="http://localhost:8000/admin/">
            <Button variant="outline-success">Admin Portal</Button>
          </a>
        </ListGroup.Item>

        <ListGroup.Item>
          <LinkContainer to="/admin/orderlist">
            <Button variant="outline-success">Orders List</Button>
          </LinkContainer>
        </ListGroup.Item>
        <ListGroup.Item>
          {" "}
          <LinkContainer to="/admin/productlist">
            <Button type="submit" variant="outline-success">
              Products List
            </Button>
          </LinkContainer>
        </ListGroup.Item>

        <ListGroup.Item>
          <LinkContainer to="/admin/appointments">
            <Button variant="outline-success">Appointments List</Button>
          </LinkContainer>
        </ListGroup.Item>
      </ListGroup>
    </Container>
  )}{" "}
</div>

Currently they look like as below

enter image description here

twitter-bootstrap reactjs css styles
1 Answers

You can always use flexbox for such things.

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  display: flex;
  flex-direction: column;
}

.container button {
  padding: 1rem;
  font-size: 1rem;
}

.container button:not(:first-child) {
  margin-top: 1rem;
}
<div class="container">
  <button>
        ADMIN PORTAL
    </button>

  <button>
        ORDERS LIST
    </button>

  <button>
        PRODUCT LIST
    </button>

  <button>
        APPOINTMENTS LIST
    </button>
</div>

Let me know if this works !?

user_157482780
Related