Some awesome Bootstrap 4 Responsive Utilities

Bootstrap has made our lives easier because of its responsive utilities (recommended having a basic HTML and CSS knowledge before playing with Bootstrap).  I’ve been using Bootstrap 4 for the past 7 months and I was surprised at the really good features and amazing utilities they released on this version. I want to share some valuable lessons from studying those docs. And please, if you have others as well, please share! 🙂

Bootstrap Grid

To give a brief context, keep in mind that Boostrap uses a property called Grid System. For this tutorial, all you need to understand is how those grids are broken into five  breakpoints, one for each screen size, from extra small to extra large devices:

// Extra Small devices (Portrait phones)
// .col-xs-*
@media (min-width: 576px) { }

// Small devices (Landscape phones)
// .col-sm-*
@media (min-width: 576px) { }

// Medium devices (tablets, 768px and up)
// .col-md-*
@media (min-width: 768px) { }

// Large devices (desktops, 992px and up)
// .col-lg-*
@media (min-width: 992px) { }

// Extra large devices (large desktops, 1200px and up)
// .col-xl-*
@media (min-width: 1200px) { }

That means you can modify them as you need and being aware of those breakpoints is pretty useful, including when you want to show or hide some content dependig on the screen size.

Usage

Now let’s go to the fun part, the examples:

  • To maintan a consistent responsiveness to you app, use col-* , so you don’t need to rely on any breakpoint to organize the elements on your page (keep in mind that depending on what you want, you may need to set a breakpoint):
// Regardless of the screen size, the columns will always have the same width

<div class="row">
  <div class="col-3">
    <div class="card">
      <div class="card-body">
        < ... >
      </div>
    </div>
  </div>
  <div class="col-9">
    < ... >
  </div>
</div>
  • Hide content depending on the screen size:
// this card will be visible only on lg screen

<div class="card d-none d-lg-block">
  <div class="card-body">
    < ... >
  </div>
</div>
  • If we want to the opposite, i.e., show on every grid except on the lg sizes, we can use the .d-lg-none class to the element:
// this list of icons be hidden on screen >= lg

<div class="fixed-bottom">
  <div class="card d-lg-none">
    <div class="nav-icons card-body">
      < ... >
    </div>
  </div>
</div>

Example

Here I have a screencast showing all of that together, resulting in a very fully responsive page, without any weird behaviour when switching between the screen size:

Hope you liked this. I was really impressed of how Boostrap 4 has made our lives easier. Enjoy it!

Creating your own Ruby new method

I’ve been studying more of Ruby from RubyTapas and I even got back to an old project of mine, the RubyFarm. I’m here today to show one really cool thing that I learned today: how to personalize the new method.

In order to do that, Ruby needs from us three things (from RubyTapas):

1 – Allocate a new, empty object of the given class.
2 – Run any specialized initialization code defined for the class
3 – Return the initialized instance

So if we would rewrite the RubyFarm Animal new instance method, for example, we could do something like:

class Animal
  def self.create_new(*args, &block)
    instance = allocate
    instance.my_initialize(*args, &block)
    instance
  end

  def my_initialize(breed, age, weight, last_vaccine)
    @breed = breed
    @age = age
    @weight = weight
    @last_vaccine = last_vaccine
  end
end

bob = Animal.create_new('domestic cat', 5, 8, 2017)
p bob # => <Animal:0x00005644aaa17800 @breed="domestic cat", @age=5, @weight=8, @last_vaccine=2017>

And voilà! Ruby really makes it easier to creates your own methods. Thanks, Avdi for all of those lessons 🙂

Hope you found that as awesome as I did when I learned this. See you next time!