Tag Archives: Bootstrap

Comparing and contrasting Bulma and Bootstrap

I haven’t been shy in the past about how I have really prefer Bulma over Bootstrap.  I wanted to use this week’s post to compare and contrast the two and hopefully reset my opinion of Bootstrap.  So, how am I going to do that?  I am going to create a webform using Bulma and then tried to replicate it in Bootstrap. Continue reading Comparing and contrasting Bulma and Bootstrap

Three ways to create a modal dialog

Today, we are going to look at three ways to add a modal dialog to your app.  The first option just uses CSS and JavaScript (no special libraries).  The second option uses Bootstrap (a topic that I haven’t touched in a few years).  The third and final option uses Bulma.  I looked back at my previous posts and don’t think that I have covered this, yet.  I am purposely trying to keep the three examples as similar to each other as possible.  There is a button that opens the modal and you can close it by either clicking on the space outside of the modal or on the X in the corner of it.

Continue reading Three ways to create a modal dialog

Fixing JWS.app: The Nav Bar (Part 2)

Last week, we looked at two ways to fix the nav on JWS.app.  For the first option, we simply added an additional header that displays when the screen width gets narrow enough.  For the second option, we introduced a hamburger menu.  This week, let’s look at two new options.

The first of this week’s options uses Bulma.  We have looked at Bulma‘s responsive navigation bar once before.  Let’s see how it works to implement our JWS.app navbar with it.

See the Pen
JWS.app – Header (After – Option 3)
by Joe Steinbring (@steinbring)
on CodePen.

The above example has no custom CSS in it.  It simply uses Bulma and it’s CSS classes for styling.  This example is pretty close to the original look and feel but it implements a hamburger menu when the screen width calls for it.  It is worth noticing that I did add an “onclick” in order to get the hamburger menu to work.

For second option, let’s look at how to implement the navigation using Bootstrap.

See the Pen
JWS.app – Header (After – Option 4)
by Joe Steinbring (@steinbring)
on CodePen.

The biggest difference with the above example is that it not only requires the Bootstrap CSS library but it also requires the Bootstrap javascript library and that library requires jQuery.  Without the javascript libraries, the hamburger menu doesn’t work.

Have a question, comment, suggestion, etc?  Feel free to drop a comment, below.

 

[ Cover photo by Joseph Barrientos on Unsplash ]

Bootstrap 101: Grid Layout

A few weeks ago, we looked at how to how to use CSS Grid and two weeks ago we looked at how to do a grid layout with Bulma.  This week, we revisit Bootstrap for the first time in over five years and look at how to do a grid-based layout with it.

See the Pen
Bootstrap 101: Layout
by Joe Steinbring (@steinbring)
on CodePen.

For the example, I tried to imitate what we did with the Bulma example.  You’ll notice that there is still no CSS or JavaScript but the syntax is a bit different.

Bootstrap wants a container, that can be .container, .container-sm, .container-md, .container-lg, .container-xl, or .container-fluid.  You then want to define rows with .row.  The rows are always 12 column widths across, so if you use .col-{number}, then {number} should always be the number of columns divided by the number 12.  You can also use .col-sm-{number}, .col-md-{number}, .col-lg-{number}, .col-xl-{number}, or .col-{number} to write to specific screen sizes.

If you leave .container-fluid and leave out the number from the column class, it should evenly space your columns.

Have any questions, comments, etc?  Leave a comment, below.

A responsive, AngularJS “movie picker”

So, I have been working on a little side-hustle and I figured that I would share the most recent chunk of it.  I needed a way of allowing a person to uniquely select a movie.  You don’t want to just give the user a free-form box because of the 52 different ways you could input some movie titles.  So, what do you do?  I created a search box, to query IMDB by title.  The API returns a single result, so I displayed it below the search box, as the user types.

I wouldn’t call this an “official” API, so I would be careful.

View in Plunker

Run in Plunker

View in jsFiddle

Run in jsFiddle