Bootstrap for Rails

Book Image

Bootstrap for Rails

By : Syed F Rahman

Book Image

Bootstrap for Rails

By: Syed F Rahman

Overview of this book

Bootstrap for Rails

Bootstrap for Rails

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Introducing Web Application Development in Rails

Introducing Web Application Development in Rails

Why Bootstrap with Rails?

Setting up a Todo application in Rails

Analyzing folder structure of a Rails application

Styling views using CSS

Challenges in styling a Rails application traditionally

Introducing Bootstrap 3

Introducing Bootstrap 3

What is Bootstrap?

Installing Bootstrap in a Rails project

Powering a Rails App with Bootstrap's Grid System

Powering a Rails App with Bootstrap's Grid System

What is Bootstrap's grid system?

Nesting columns

Implementing Bootstrap's grid system in a Rails application

Using Bootstrap's Typography, Buttons, and Images in a Rails Application

Using Bootstrap's Typography, Buttons, and Images in a Rails Application

Styling typography

Creating and styling buttons

Styling images in Bootstrap

Reinventing Tables and Forms in Bootstrap

Reinventing Tables and Forms in Bootstrap

Creating Bootstrap tables

Creating Bootstrap forms

Validation classes in Bootstrap forms

Creating Navigation Bars

Creating Navigation Bars

Getting started with a navigation bar

Navigation bar helper classes

Adding a navigation bar to the Rails application

Various Other Bootstrap Components

Various Other Bootstrap Components

Bootstrap Breadcrumbs

The pagination component

Bootstrap labels and badges

Bootstrap jumbotrons

Creating a progress bar

Working with Bootstrap Modals

Working with Bootstrap Modals

Getting started with modals

Changing Bootstrap's modal size

Additional Bootstrap modal features

Fetching remote content from a Bootstrap modal

Using Bootstrap's modal in a Rails application

Creating Image Slideshows with Bootstrap Carousel

Creating Image Slideshows with Bootstrap Carousel

Getting started with Bootstrap Carousel

Adding captions to the slides

Customizing Carousel

Creating a Shopping Cart Using Bootstrap Modals

Creating a Shopping Cart Using Bootstrap Modals

Adding a shopping cart symbol

Creating a shopping cart using modals

Adding Custom Styles to a Rails Application

Adding Custom Styles to a Rails Application

Adding Bootstrap-sass to a Rails application

Customizing Bootstrap through variables

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Chapter 6. Creating Navigation Bars

Creating a navigation bar has been one of the most difficult tasks for a novice web designer or a web developer, with no experience in web designing. One has to take care of properly aligning links, overflows, styling links, making the whole bar responsive, and so on.

Bootstrap gives you plenty of choice to create and design a navigation bar without diving deep into its CSS. Just like creating any other components in Bootstrap, creating a navigation bar also requires us to follow a proper markup structure. In this article, we will learn how to create a Bootstrap navigation bar, and how we can modify it to fit our needs. We will also check out various other ways of representing a navigation bar in a website. We will also integrate a fixed navigation bar in our current application, OnlinePacktShopping.