Monday Projects Clone Using Bootstrap

Summary

Experimenting using Bootstrap CSS to recreate the main projects page of Monday with a sprinkle of custom css.

My goal in this experiment was NOT about making it responsive, but to see if I could recreate the user interface using Bootstrap.

Tech

• Bootstrap
• CSS
• HTML
• Glitch

HTML

Here are the resources in the head of the document.

I will not include all of the html here as it is quite long, however you can view the source code on Glitch.

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
/>

CSS

Here is the sprinkle of CSS.

*,
body,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #d3d7e3;
}
.btn-outline-primary.text-primary:hover {
  color: white !important;
}
.bi-bell,
.bi-envelope-at,
.bi-person-add,
.bi-search,
.bi-puzzle,
.bi-question-circle {
  font-size: 1.1rem;
  color: rgb(65, 65, 65);
}

.navbar-nav .nav-item a.nav-link.iconcolour {
  background-color: #eceff8;
  border-radius: 5px;
}
.navbar-nav .nav-item a.nav-link.iconcolour:hover {
  background-color: #d3d7e3;
  border-radius: 5px;
}

.left-rounded-border {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.right-rounded-border {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0;
}
.btn-light:hover {
  /* background-color: rgb(199, 199, 199) !important; */
  background-color: var(--bs-gray-300);
}

.accordion-button:not(.collapsed) {
  background-color: white;
}

Demo

Here is a link to the demonstration on Glitch.

Link to Demo