UI Updates using Boostrap Grid

Today I want to update the Header using the Navbar component of the React-Bootstrap library. I decide to use a toggle icon that will expand for a larger screen width. Clicking the toggle icon causes the Sign Up or Sign In links to appear or disappear. I also started fresh with a new css file for the header, although the bulk of the styling that I'll do today will be using Bootstrap itself, so the css file will be very light.

Using the Bootstrap Navbar component is very straight forward and I find it works great for mobile. I follow the docs at https://react-bootstrap.github.io/components/navbar/. I have the Navbar toggle set to expand when the screen width is greater than 992px. Below you can see the different views. First in the mobile version, when the icon is clicked it brings up the options for Sign up and Sign In. Second, the desktop view with no icon at all.

The updated Header component using the Bootstrap Navbar.

Next I want to clean up the look of the Groups list component. I want my list to resemble the list of groups on Meetup.com, which was partially the inspiration for my app, so that’s the general design I'm going for. I'm going to continue to use Bootstrap for styling the elements.

I begin by adding the container class to my unordered list. Then I add the row class to each list item. This works well because I'm planning to have one group listed at a time on the screen. Then I picture each group list item having 2 columns. The first column contains only the time and is much skinnier compared to the second column. The second column contains the name of the group and the location. I decide that I want to take out the date of the group for now, but I might add this back in later.

The list is cleaner and less cluttered now. I also take out the labels for About, Where, When, etc. because they were taking up unnecessary room on the screen. I also removed the margin from the p elements within the list items so that text takes up less room.

Next I want to clean up the look of the single Group component. I want to keep the same general flow of information for the user, so I recolor the header element to be the same blue color from the Groups view. I also import buttons from Bootstrap and use these for Edit and Delete. I want the buttons to sit on the right side of the page, so I make the column containing the buttons a flex box, and then give the column the justify-content property of flex-end.

The left image is the updated Groups list component, and the right image is the updated Group component.