Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make bootstrap 3 fluid layout without horizontal scrollbar

here is sample link: http://bootply.com/76369

this is html i use.

<div class="row">   <div class="col-md-6">.col-md-6</div>   <div class="col-md-6">.col-md-6</div> </div> 

bootstrap 3 has no container-fluid and row-fluid.

i cannot wrap it with .container class because it will become fixed layout.

how to make it fluid (full page width) layout? (without horizontal scrollbar)

with these markup. when you view in the result the x-scroll bar is visible so you can scroll to left and right that it should not.


edited: 2015-12-09
Already got answer and Bootstrap already released the fix since 3.1.0

like image 730
vee Avatar asked Aug 22 '13 23:08

vee


People also ask

How do I get rid of the horizontal scrollbar in Bootstrap 3?

The solution is that you can add a . no-container class to the row and add margin: 0 to compensate the negative margin of the row class.

How do you make an overflow scroll horizontal?

Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

Does 100vw include scrollbar?

Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.

How do I make my vertical overflow scroll?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.


1 Answers

I also have it and while waiting on them to fix it, I added this shame css :

body { overflow-x: hidden;}

it's an horrible alternative, but it work. I'll be happy to remove it when they'll have fixed the issue.

An other alternative, as pointed out in the issue, is to override .row :

.row {   margin-left: 0px;   margin-right: 0px; } 
like image 80
Cyril N. Avatar answered Sep 19 '22 23:09

Cyril N.