One of my weaker areas in developing web application is by far using html and css to style the web page. In my second milestone project for Flatiron school, I developed a Sinatra web application in which I needed to incorporate html and css to style my web pages and make it look pretty. While building the backend of the application was fairly easy, I definitely felt like I spent most of my time working with the HTML and CSS aspect.

In my application I incorporated Bootstrap 5 to help with styling of some aspects of my app like the buttons and log-in page. At first I was super confused at some of the classes that Bootstrap uses. For example...

<td><form class="edit" action="/stocks/<%= stock.id %>" method="get">
          <input type="submit" class="btn btn-primary" name="" value="Stock Info">
        </form></td>

At first glance I was confused with the class names like "btn btn-primary". But with further investigation the reason for that is to help tell Bootstrap how I want to style a specific element. For example in the snippet above, I am telling Bootstrap to style the input element to look like a blue button called Stock Info. Bootstrap has many classes like this to help provide styling to your project with ease.

You can apply this concept to other elements like creating a flash alert. For example...

  <div class="container-c alert alert-danger" role="alert">
    <%= flash[:notice] %>
  </div>

This code snippet will provide a red looking alert at the top of the page when I get an error message. The reason for the look comes from the class name "alert alert-danger".

The more I used this concept the more natural it felt using Bootstrap to help style with ease.