Learning Laravel Eloquent: Relationships and Bootstrap

Mar. 27, 2023  ·  4 min read

In this sixth week, I gained new knowledge in Laravel Eloquent Relationships and Integrated Bootstrap CSS into the Tasklist feature. I was so happy to explore more about Laravel during my internship at the company.

Laravel Eloquent: Relationships - Day 20 & 21

On this day, we were given a task to study Laravel Eloquent: Relationships in one-to-many and apply it to our basic task list or working repository. It was hard for me to understand and analyze how to connect another table. I learned that when I tried to apply the one-to-many, it gave me a hard time. It had a lot of errors, and even the authentication is not responding, but I realized it was better to create a new one from scratch to understand more about the process for creating the given task. I learned about using the foreign key to establish relationships between tables. We learned a lot from our mistakes by not focusing on the patterns or conventions that we should work on and giving myself time to understand more about conventions with the help of our mentor. and I always remember to verify that I clearly understand the given task.

Bootstrap CSS - Day 22 & 23

On this day, we were given a task or ticket, and I’m focusing on my ticket, which is to integrate Bootstrap CSS into the TaskList feature. I made some changes to the layout and learned what the proper way is to use Bootstrap Grids to understand the proper way to use the columns across the page and all over to apply consistency to every layout.

Bootstrap Grid Classes

Here are the Bootstrap Grid Classes or Responsive Breakpoints I learned during this week to specify the screen sizes of the responsive layout of a website.

  • xs - used for mobile devices with a screen width of less than 576 pixels.
  • sm - used for small devices with a screen width of 576 pixels or more.
  • md - used for medium devices with a screen width of 768 pixels or more.
  • lg - used for large devices with a screen width of 992 pixels or more.
  • xl - used for extra large devices with a screen width of 1200 pixels or more.

Components of Grid System

Here are the Components of the Bootstrap Grid System I learned to create a flexible and responsive layouts.

  • .container - used to create a fixed-width container for the content.
  • .row - used to create a horizontal row of columns within the container.
  • .col - used to define the columns within the row and can specify the number of the columns each element should occupy by using classes like .col-sm-3 or .col-md-4.

Bootstrap Tables

Here are the Bootstrap Tables that I learned to used to create styled and responsive tables.

  • .table - used to create a basic table with horizontal dividers.
  • .table-striped - used to add zebra-striping to a table with alternate background colors for rows.
  • .table-bordered - used to add borders on all sides of the table and cells.
  • .table-hover - used to add a hover effect to the table rows, highlighting the row when the mouse is over it.

Lastly, this week was a great experience, and I gained new knowledge about learning in Laravel after applying Bootstrap. I always put my mind to ensuring the consistency of the website. I’m so grateful to our mentor, who helped us when we didn’t understand the process.

Author

Julie Beñola
Julie Beñola
A friend, pet lover, and a young woman with big dreams and enthuastic about technology and believes in it's power to improve employment and enhance life. Hoping to explore new software knowledge, improve her programming skills, and make a positive impact in the world.

You might be interested in