Sau đó mở file Footer.php để đóng nó, tạo cho cả website nằm trong thẻ Container sẽ cách đều hai bên là 15px. Tiếp theo, các bạn vào Style.css để chỉnh kích thước maximum của màn hình, thông thường website sẽ rộng nhất là 1200px hoặc 980px. body {max-width:1200px; margin:0 auto}

Như layout ví dụ trên, Website có độ rộng 1200px maximum, trong Content chính để class là col-md-8 với ý nghĩa là độ rộng 8 phần / 12 phần, còn sidebar dùng class col-md-4 để rộng 4 phần / 12 phần, tổng thể của chúng phải luôn là 12 phần.

Tiếp theo các bạn co màn hình vào khoảng 780px độ rộng, đó là nơi dành cho màn hình trung bình của máy tính bảng, tại thẻ bọc content vừa nãy ta dùng class là col-md-8, các bạn bổ sung thêm col-xm-12 vào, làm tương tự với sidebar cũng cho thêm col-sm-12 vào, như vậy khi người dùng sử dụng màn hình máy tính bảng thì Content và Sidebar đều dãn hết cỡ, vừa vặn với độ rộng màn hình.

Tiếp tục, các bạn có thể bổ sung thêm col-xs-12 để làm việc với màn hình điện thoại hoặc nếu muốn chia đôi màn hình điện thoại thì sử dụng col-xs-6 cho cả content và sidebar.

5. Một số lỗi thường gặp trong quá trình sử dụng Bootstrap

- Giao diện hiển thị không chính xác trên các thiết bị khác nhau: khi sử dụng Bootstrap, một trong những điều lưu ý đầu tiên là trong các trang định dạng (stylesheet) không được sử dụng thuộc tính width mà phải thay bằng max-width để giới hạn độ rộng của điều khiển, phần còn lại sẽ để cho Bootstrap tự xử lý. Nếu xử dụng width sẽ khiến cho giao diện không thể tự co giãn cho phù hợp với các thiết bị khác nhau. - Thay đổi nội dung của file bootstrap.css: nếu thay đổi nội dung của file bootstrap sẽ khiến cho toàn bộ thiết kế bị hư khi muốn nâng cấp file Bootstrap. Để tránh lỗi này thay vì sửa nội dung của file Bootstrap.css thì bạn có thể viết đè (overwrite) trong trang định dạng (stylesheet) của riêng bạn để thay đổi các thiết lập mặc định của Bootstrap về colors (màu sắc), styles (định dạng), margins (lề ngoài), paddings (lề trong) cũng như mọi thứ khác - Hiển thị hộp hội thoại (Bootstrap modals) không đúng cách: như hiển thị nhiều hơn một modal, hiển thị modal không đúng cách (nằm dưới phần nền)

• Bootstrap không hỗ trợ hiển thị chồng các modals (overlapping). Chỉ 1 modal tại 1 thời điểm có thể hiển thị. Nếu muốn hiển thị nhiều hơn 1 modal tại 1 thời điểm có thể chỉnh sửa code để thực hiện điều này nhưng sẽ khiến cho thư viện bootstrap bị lỗi khi nâng cấp
• Nếu đối tượng chứa modal hoặc thành phần cha của nó có thuộc tính position là fixed hoặc relative, modal sẽ không hiển thị đúng. Luôn luôn chắc rằng đối tượng chứa modal và thành phần cha của nó không dùng thuộc tính position đặc biệt. Cách tốt nhất là đặt mã HTML của modal ngay trước thẻ đóng < /body >, hoặc tốt hơn nữa là ngay sau thẻ mở < body >. Đây là cách tốt nhất để tránh những thành phần khác ảnh hưởng tới giao diện và tính năng của modal.

- Không sử dụng các thuộc tính “data-“: nếu các bạn chưa quen sử dụng Bootstrap sẽ dễ dàng bỏ qua các thuộc tính “data-“ mà phải viết thêm các đoạn code JavaScript để thực hiện xử lý. Ví dụ: để kích hoạt một modal chúng ta có thể sử dụng 1 tag html để kích hoạt đơn giản như sau thay vì phải sử dụng JavaScript:

• data-toggle="modal": chỉ định nút lệnh sẽ kích chọn modal khi được nhấn.
• data-target="

  myModal": chỉ định modal có id là myModal sẽ được hiển thị

• data-backdrop="static": không đóng modal khi người dùng click ra ngoài modal
• data-keyboard="false": không đóng modal khi người dùng nhấn phím Escape.

- Không khai báo thư viện hỗ trợ với trình duyệt IE8 và các trình duyệt cũ hơn: Bootstrap hoạt động tốt nhất trên những trình duyệt mobile và máy tính mới. Những trình duyệt cũ sẽ hiển thị giao diện với định dạng khác đi, nhưng mọi thứ vẫn hoạt động bình thường. Để có sự hỗ trợ đầu đủ cho Internet Explorer 8 và những trình duyệt cũ hơn khác, bạn cần dùng công cụ hỗ trợ cho những truy xuất CSS3 (CSS3 Media Queries) là Respond.js và HTML5 shim, những công cụ này cho phép hiển thị những thành phần HTML5, và thêm một thẻ < meta > để đảm bảo IE không chạy trong chế độ compatibility mode