Login Page With Bootstrap

     Couple weeks ago i finished to learn CSS. In CSS, to specify a class we need to make one by one. For example, if we want to make a beautiful blue button with a complete style, we need to code like this.

.login-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
}

    There is so many styles that we have to insert into our CSS button and it could be irksome if we want to work fast. 

However, there is a solution for that. 

The solution is to use Bootstrap, we can make a nifty button by just calling "btn" on the css class. Here's what it looks like.

<button class="btn">Button</button>

As a result, we can make the same button as the css class we specify one by one with just only a second.
  • What if I want to add more or change the current style?
Another interesting part about this bootstrap framework is you can combine with classic css. So indeed, you can add more style or even change the current style.

By specifying another css class, the style will be merged with the bootstrap style, or if you want to change the current bootstrap class, you can make the class that you want to change with css and it will automatically overwrite the current bootstrap style.

That is a slight basis of bootstrap and how it works, here's my exercise using bootstrap to build a login form.



You can check the code through my github: https://github.com/farrasnazhif/pweb-a/tree/main/bootstrap

Comments

Post a Comment

Popular posts from this blog

Typewriting Speed for Coders

Image
      As coders, t ypewriting is one of the main basis. We rely on the ability to type fast and accurately, since writing is our primary tool for building projects. The faster and more accurately we can type, the smoother our workflow becomes.       In order to enhance my typewriting skills especially the speed and accuracy, i tried many times testing my typing speed. At first, it wasn't fast enough for me because as far as i know, the average to become a fast typewriters we need to reach 60 wpm (words per minute), minimum. However, my first attempt was 57 wpm, it's so close though 😅.      Actually, many speed typewriters use all their fingers to be a speedster in typewriting.  In short, i have been striving to get above 60 wpm and i did it, eventually. Though I reached that speed with only using.. i think eight fingers, i didn't use my pinkies. So i can tell my achievement is not that enormous, therefore I have ambitions to escala...
Read more

Building Profile Page with HTML

Image
      I n this lesson, i learned about HTML. There are lots of HTML tags out there however in this lesson i learned 8 new tags. Below are the tags i learned. Heading Paragraph List Link (Hyperlink) Image Table Form      With those tags, i built a simple profile page with just using HTML. With only using HTML, i know the page will look a bit stiff. Actually, if you want to make it nifty, you need to apply the style with CSS. Though in this lesson i only got subjected only using HTML. So, below is my shot of profile page with only using HTML.     See, the page looks a bit stiff and the alignment only to the left of the screen.  Actually i already learned about CSS before, therefore in order to make it nifty, i arranged myself to style it with simple CSS.      Here's what it looks like with CSS. You can check out the code through my github:  https://github.com/farrasnazhif/profile-page-html.git
Read more

Learning by Doing: Web Development Course Landing Page

Image
          In this lesson, I was assigned to build a landing page for a web development course platform. Currently, i just use HTML and CSS, however, i would add javascript eventually. I learned a lot when i was working on it. I used many new tags that i didn't know it before.  Here's the result, you can check it through this link:  https://tranquil-meerkat-376355.netlify.app/ Or if my domain is ever unavailable, I’ll give you a glimpse of the page 😁 . You can check out the code through my github: https://github.com/farrasnazhif/web-course.git
Read more