Bootstrap Portfolio :

Welcome to my first developer portfolio! I designed a responsive website to show off the different projects I have been working on. I used Bootstrap CSS Framework to create a mobile responsive portfolio. Feel free to take a look at how I applied Bootstrap classes and components to my website.

Overview

• Project link: https://kopelson.github.io/responsiveBootstrapPortfolio/

About

• Responsive Bootstrap navbar

Contact

• Small screen dropdown navbar

Portfolio

• Responsive Bootstrap grid system

Self imposed rules

• Develop a portfolio with the following items using Bootstrap:
  • A navbar
  • A responsive layout
  • Resposive images
• Minimize the use of media queries.
• Use Semantic html.
• Utilize Bootstrap components and grid system.

Bootstrap classes I used in this project:

Layout

  1. container
     * Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container. (https://getbootstrap.com/docs/4.5/layout/overview/#containers)
  2. row
     * Rows are a horizontal design area to keep information connected.
  3. col
     * Columns are the individual vertical cells that contain data.

Components

  1. navbar
  2. nav
  3. form
  4. btn
     *adds button style

Utilities

  1. text
     * Used to change text style.
  2. bg
     * Used to change background style.
  3. m
     * Sets margin and used with 1 through 5 settings to set spacing multiplier. i.e: "m-3".  
  4. p
     * Sets padding and uses the same settings as margin.
  5. t,r,b,l
     * Used with other utilites but specify top, right, bottom, left - respecitivly. i.e: "pl-2" would change the padding on the left side of the element.
  6. float-left
     * Sets a float status to the element.
  7. fixed-bottom
     * Used to set the position of an element to fixed and specifically the bottom. I used this to create a sticky footer.

Breakpoints

  1. col-md-8
     * Sets the breakpoint of an element. The "md" stands for medium screen and if the window go below the medium pixel count the element goes to 100% width automatically.
  2. col-4
     * Bootstrap uses a 12 column grid and specifying "col-4" will set the width 4 out of 12 columns wide.

Credits

Thank you Bootstrap for a fantastic CSS Framework. Check out more @ https://getbootstrap.com/.

License

• Feel free to use any part of my code but please do not reuse any of my personal information and/or pictures without direct consent from me. Do not try to contact me for any reason other than business opportunities.