CODEWITHSUNDEEP
csstemplatestabsruby-on-rails-5
user3461645
user3461645

Reputation: 195

Ruby on Rails 5, tabbed template

I am trying to figure out how I can implement a tabbed site similar to the image below. Does anyone know/recognize this template or can guide me on how I can design something similar with bootstrap and css?

enter image description here

Upvotes: 0

Views: 409

Answers (1)

Dan
Dan

Reputation: 1246

Bootstrap has a javascript tab plugin included to change tabs on clicking. You can checkout https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior

If you want the pages to load a new page on clicking you could do something like (I've used font awesome for the icons here)

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="/sourcing"><i class="fa fa-pie-chart"></i>Sourcing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/people"><i class="fa fa-user-o"></i>People</a>
  </li>
</ul>

In bootstrap 4 this would get the basic example working and you could play around with the CSS to change the look of each a when it has the "active" class

Upvotes: 1

Related Questions