#bootstrap 5

use-bootstrap-toaster is a lightweight and simple JavaScript library to easily create and customize toast notifications in your Bootstrap 5 project. You can display custom HTML content, control the placement and stacking of your toasts, and even add animations and delays. How to use it: 1. Install and import the library into your Bootstrap project using NPM: npm install…

We also had to add a page to our site "for fun," I still needed to include a form so I made a "Be My Friend" application where I ask for the important things: Names, Secrets, and Favorite Snacks.

I know I have been dragging Bootstrap through the mud in these last couple of posts but it really did come in clutch by doing most of the styling for my form for me. Sorry for everything I said, praise the art of convenience.

Mobile:

Desktop:

Pretty simple, which fits with the motif of the NameBoy.

The HTML:

We have a new carousel item with a new id to boot. The h2 tag of this page has a unique id.

The form is centered in a centered justified flexbox. The inputs have types, names, ids, and matching labels. They are all text imputs besides the secret input, which is a password. The submit box uses the same centering trick as the form.

We have regular and reverse navhints.

The CSS:

There were only three pieces of custom CSS, for the margins and colors.

Conclusion:

Do you want to develop an API with PHP, JSON, and POSTMAN?

Or are you simply looking for a way to build API for your Android App or IOS app?

Look no further!

In this tutorial, I will show you how to do just that!

We’ll go over the basics of each technology, we are using. Then dive into how to use them together to create API for your need. By the end of this tutorial, you’ll be able to create your API with PHP and JSON.

Before diving in, might I recommend a fantastic free editor that I love to use?

What is an API?

So you want to build API or maybe multiple APIs?

First, let’s understand what is an API and why we rely on them in modern web app development.

The official definition you will find is: API stands for Application Programming Interface.

This push, I added the Contact Us page.

On Desktop:

On Mobile:

The HTML:

I used some internal CSS in the head tag because I wanted the cards and text on this page to look a little different.

Our nav bar (and this is standard on all pages) is contained in a div that sticks it to the top of the page, even as you scroll. The z-index-top class makes the z index 100 so it overlaps everything.

The rest of the navbar is the same as other pages.

So the first div you see after the nav bar is only visible on medium screens and below. This div contains a card that has been flexed to center it's content. This card is the instruction card for who to contact. On bigger screens, a nearly identical one will appear in the center of the Contact Us grid.

Our Contact Us grid uses Bootstrap rows and cols. The row has a 100% width and a minimum height of 50% of the viewport. It justifies it content to the center of the column on mobile but otherwise it justifies content by the space around in a row. It aligns items center on mobile and stretches them out on other devices. It also has a margin on the top and bottom.

The cols are flex columns that justify their content based on the space between. That's how we get the vertical spacing on desktop.

The cards have some padding and a bottom margin, and the contact links are formatted.

The middle col only contains the who to contact div that reveals on medium devices and up.

The footer is the same as the other pages.

The CSS:

I did not add any external CSS for this page besides the z-index-top class I mentioned earlier. I'm pretty proud of this because it means that I am getting better at utilizing Bootstrap 5 classes.

Conclusion:

This commit, I built the goals and education pages on the NameBoy. It was easier than the last commit because I spent most of last commit building the responsiveness and spent much of this one just taking advantage of it.

Mobile (Goals):

Mobile (Education):

Desktop (Goals):

Desktop (Education):

I love how it's coming together!

The HTML:

All I had to do here was add two new carousel items with some stylized text.

The goals screen has a centered heading with three separately identified (and styled) subheadings. We have our nav hints absolutely positioned on the corners.

The education screen is mostly the same thing. The heading is centered but non of the text is colored. There are 2 unordered lists, with list items that contain the "edItem" class. We have another navhint and a navhintReverse.

The CSS

On the goals screen, our h2 is pink, our h3 is 16px and underlined with a margin all around.

Learn is blue, Build is red, Play is orange.

On the education screen, I made the heading green and the h3 tags 16px in font-size. The edItems have a small margin to help space them.

I moved the #homeScreen > p statement to a general p {} statement. I also added navhintReverse to do nav hints on the left side of the screen.

Conclusion:

HTML/CSS is not very quick in making artistic webpages but it is pretty fast at styling plain-text like this. It was a breeze.

The makers of the languages had great ideas, and did a good job, but they never could have predicted that the web would evolve the way it did.

This commit, I built the navbar. I used Bootstrap 5 tools and flexbox to make it responsive.

The HTML

The head tag is basic. We've got our title and we've imported 2 stylesheets from the web. These give us our framework and the Noto Sans font. We also have our personal stylesheet.

The body tag has a basic Bootstrap Nav setup. The nav tag has the navbar and navbar-expand-lg classes since those are the two breakpoints I will use in the nav. On lg, we justify-content: space-around so that the items place themselves evenly across the top.

The logo is actually just a div with an h1 tag (for the browser/SE) with a background image. The positioning on that was fun, I decided to use a flexbox to make it.

The CSS:

First, we add in the font we use for the logo. A lot of the custom css is related to margins, padding, and colors. The logo is a flex box (direction: row) with a predetermined minimum width that we justify-content to the right on. This keeps our text to the right. Then the text aligns itself to the bottom. Luckily we only had one flex-child in the container so the nonexistence of justify-self is not an issue.

Initially, I had used some relative positioning to do things (specifically the logo) before seeing that it made the width of the page wider than the viewport. At this point, I purged all relative positioning from my page and praised flex-box.

To make it attractive for mobile devices, it collapses to 2 top items on the bar: a hamburger menu and our logo. Our menu then displays the nav items and call button in a list below when clicked on. This kind of interactivity takes no time to build with Bootstrap 5 Collapse.

Next commit, I will add in a custom hamburger menu for the mobile version. I will also build the testimonial carousel and the services grid/tree.

This commit used a Bootstrap 5 Grid to build an information tree for the site.

On Desktop:

On Mobile:

In Between:

The HTML:

First, I set up a container div with a width of 90vw and 5% on each side. This keeps everything in the middle and at least 90% of the width is used.

The Bootstrap 5 Grid system is a framework for flex-boxes. Basically, they set up the rows and columns classes for me, with pretty extensive responsiveness and including table/grid-like tools that let you adjust the size of the cols without sweating.

By default our cols are not flex containers, so we added d-flex and related attributes so that we can position the column content using flexbox tools.

The middle row flex-wraps in reverse so that even though it's positioned opposite the others on desktop, when wrapped, it reverses itself back to a sensible position.

The reason that I have both an image and a surrounding wrapper is so that I can flex position the image to keep it in line with the rest of the page. The border is applied to the image directly though.

The middle cols contain the lines. This was the biggest challenge. The lines are contained in a positioned (relative) wrapper stretched to fit the div. Because the wrapper is positioned but not flex, I can use absolute positioning for my line spans. This is desirable because flex positioning, which I generally like better, does not let you overlap your elements as easily. Took me more than an hour to figure out this solution.

The vertical line is 350% height in the top div, but not present in the middle div. This is to work around the row padding and stretch across all rows. The last div has a 100% height vertical line to help hide make sure the line does not cut short as the page flexes. This took me like 10 minutes to come up with but it was a satisfying fix. Maybe writing the div outside of the rows and positioning it in regard to the whole section of the page could be better though.

The CSS:

The CSS is comparatively simple since Bootstrap lets me do a large amount of the styling on the HTML doc.

Every row child has a top and bottom padding, additionally they position themselves across the row with equal space in between.

The linewrapper stretches to fit it's div with width and height at 100%. Because it's relatively positioned, I can play with absolutely positioned elements on the inside.

The vertline, as mentioned earlier, has 350% height, no width. a 6px black border and is absolutely positioned 50% from the left border of it's wrapper.

the hlines are similar. Absolutely positioned 50% to the left or right of the wrapper, with a 3px solid black border. The width of the line is 60% so it goes through and under the image. The treeimageWrapper has a z-index of 4 so that the lines go under it.

The treeimage has a 3px black border.

I added one media query to the tree images to make sure they are at least 30% of the viewport in terms of width on desktop. Without this, you get some baby-sized images.

Conclusion:

I think that learning to develop is a lot like learning to play chess. When you practice chess, you get better in two ways: 1) You get used to stretching your brain in the chess direction and 2) You have at least some memory of how you have solved similar problems in the past.

It took me a few hours to write, what I realize now that I review it, is a small amount of code. I'd say more than 50% of the code I write, I delete and rewrite before I actually solve the problem. I think that as I solve more problems like this, my memory of their eccentricities will strengthen and I will be able to write quick solutions because, well, I've already solved it.