Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Bootstrap Issue With Col Class

Post a Comment
hi all i'm trying to code a website and i have issue with col class what ever i use it takes all my screen width col-md-4 or col-md-6 or col-md-3 i don't know if the problem from m

Solution 1:

Actually your code working as is, if I just add bootstrap.css to id from CDN. Is css/bootstrap.css file really exists in your local folder?

<!DOCTYPE html><html><head><title></title><metacharset="utf-8"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"></head><body><header><divclass="text-center"><h1>RTWM FOR UNIFORMS</h1><h3>Proud To Serve You</h3></div></header><divclass="container-fluid"><divclass="col-md-12"><divclass="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div></div></div></body></html>

(make sure you clicked the Full page link because .col-md-* classes only work when page width is more than 992px)

Also note, that by bootstrap documentation to the grid system:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.

So you should always place column classes only as direct childs of .row.

So, the fixed code would be this:

<!DOCTYPE html><html><head><title></title><metacharset="utf-8"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"></head><body><header><divclass="text-center"><h1>RTWM FOR UNIFORMS</h1><h3>Proud To Serve You</h3></div></header><divclass="container-fluid"><divclass="row"><divclass="col-md-12"><divclass="row"><divclass="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div></div></div></div></div></body></html>

Solution 2: 

<!DOCTYPE html><html><head><title></title><metacharset="utf-8"><linkrel="stylesheet"href="css/bootstrap.css"><linkrel="stylesheet"href="css/font-awesome.css"><linkrel="stylesheet"href="css/style.css"><scriptsrc="js/jquery.js"></script><scriptsrc="js/bootstrap.js"></script></head><body><navclass="navbar navbar-custom navbar-fixed-top"><divclass="container-fluid"><divclass="navbar-header"><ahref="index.html"class="navbar-brand">RTWM.Com</a></div><ulclass="nav navbar-nav navbar-right"><li><ahref="#">About</a></li><li><ahref="#">Contact Us</a></li></ul></div></nav><header><divclass="text-center"><h1>RTWM FOR UNIFORMS</h1><h3>Proud To Serve You</h3></div></header><divclass="container-fluid"><divclass="row"><divclass="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div></div></div></body></html>

Post a Comment for "Bootstrap Issue With Col Class"