{"id":5198,"date":"2016-11-01T01:54:48","date_gmt":"2016-11-01T01:54:48","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=5198"},"modified":"2016-11-01T01:54:48","modified_gmt":"2016-11-01T01:54:48","slug":"building-responsive-grids-react-bootstrap","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/building-responsive-grids-react-bootstrap\/","title":{"rendered":"Building responsive grids with React Bootstrap"},"content":{"rendered":"

React Bootstrap is a nice wrapper around Bootstrap, allowing you to build screens with Bootstrap components, hiding a little bit of the need for knowledge of Bootstrap’s CSS.<\/p>\n

To render a table, React Bootstrap provides React classes named “Grid”, “Col”, and “Row”, which can be used interchangeably in a table.<\/p>\n

For instance, to render a responsive faceted search display for FindLectures.com<\/a>, I’ve written markup like this:<\/p>\n

\n\n  \n    \n  <\/Row>          \n  \n    
\n     {countDescription}\n    <\/div>\n  <\/Row>\n  \n    {facets}\n  <\/Col>\n  \n    {searchResults}\n    \n  <\/Col>\n<\/Grid>\n<\/pre>\n
The important part of this are the parameters: xs, sm, md, and lg. The Bootstrap grid system is a 12 column grid, and these tell Bootstrap how many column units each component should consume, depending on the screen size. The smallest size, xs, is for phones, all the way up to large displays. You can also tell Bootstrap to swap an object to the right\/left by a certain number of columns, using props like lgPush\/lgPull, move to the right with lgOffset, and hide columns at a certain display size with lgHidden.<\/p>\n
To test this, you can simply resize your browser, to see the different rendering sizes.<\/p>\n
By default, each column is a percentage of the total screen size – for certain scenarios this can become unrealistic. For instance, I found that for facets I don’t want the facet panel to become wider than the widest facet, which is why I manually set max-width in the above example.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to make a responsive grid in React Bootstrap<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[12],"tags":[92,129,302,455],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t