Loading...

Full-, Custom-Width, and Responsive Layouting with Bootstrap

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article is available only for CS-Cart versions:
  • 4.0.x

Starting from version 4, CS-Cart uses the Bootstrap framework that can have the full-, custom-width, and responsive layout.

To set different layouts, you should apply changes to a CSS file. The layout in CS-Cart has 12- or 16-column structure. So, for 16-column grid the path to this file is:

design/themes/basic/css/lib/bootstrap/bootstrap_grid_16.min.css

And for 12-column grid:

design/themes/basic/css/lib/bootstrap/bootstrap_grid_12.min.css

Further we will describe the layout setting for 16-column grid, as an example. For 12-column grid steps are the same.

Full-Width Layout

To set the full-width layout:

  • Replace container with container-fluid in the file:
    design/themes/basic/templates/views/block_manager/render/container.tpl
  • Replace row with row-fluid in the file:
    design/themes/basic/templates/views/block_manager/render/grid.tpl

Now, the page will have the full-width layout.

Setting the Fixed Width of the Page

To set the fixed width of the page (1200px, for example:)

  • Set the page layout for the full-screen size, as described above.
  • Find the line 107 in the file bootstrap_grid_16.min.css. The path to this file:
    design/themes/basic/css/lib/bootstrap/bootstrap_grid_16.min.css
    To the container-fluid class in this file add:
    max-width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
    As a result, your line 107 will look similar to this:
    .container-fluid{...;max-width: 1200px;min-width: 1200px;margin: 0 auto;}...}

Layout Customization

Bootstrap has the layout customization service that allows to generate custom layouts online and download prepared files. To create the custom layout:

  • Follow this link and choose Grid system and Layouts checkboxes in the Choose components → Scaffolding section. Other ticks in this section must be removed. See the picture below.

     

    scaffolding

     

    Further you set the default values for the CS-Cart layout to adjust page appearance (Customize variables → Grid system section:)
    16 Grid system with Gutter
    @gridColumns: 16
    @gridColumnWidth: 45px
    @gridGutterWidth: 15px
    @gridColumnWidth1200: 52.5px
    @gridGutterWidth1200: 22.5px
    @gridColumnWidth768: 31.5px
    @gridGutterWidth768: 15px
    But it is possible to set the values to avoid gutters between blocks in the grid:
    16 Grid system without Gutter
    @gridColumns: 16
    @gridColumnWidth: 60px
    @gridGutterWidth: 0px
    @gridColumnWidth1200: 75px
    @gridGutterWidth1200: 0px
    @gridColumnWidth768: 46.5px
    @gridGutterWidth768: 0px
    Change the columns width (@gridColumnWidth) and the spacing between them (@gridGutterWidth) to adjust the layout width.

 

  • Then, press Customize and Download at the bottom of the page Bootstrap Customize to download the generated file.

     

    bootstrap_download

     

    After that, find the directory
    design/themes/basic/css/lib/bootstrap/
    and replace the bootstrap_grid_16.min.css file with the downloaded file.

Responsive Layout in Bootstrap

Responsive layout is flexible and easily adapting for different screen sizes. It is very useful for displaying site content on the portable devices screens. To enable responsive layout:

  • Add the following to the files from the Choose components → Responsive section:
  • bootstrap_01

     

  • Then, press Customize and Download at the bottom of the page Bootstrap Customize to download the generated file.

     

    bootstrap_download
  •  

  • Open the downloaded file, find there the .hidden{display:none;visibility:hidden;} class, and delete it. It is necessary for the correct operation of picture galeries.
  • After that, find the directory
    design/themes/basic/css/lib/bootstrap/
    and replace the bootstrap_grid_16.min.css file with the downloaded file.
NOTE: In order to make the full responsive layout on your site, you can use our Custom Development service.

If you choose the 12-column grid while adding or editing the layout in the administration panel of your store, styles are taken from the file bootstrap_grid_12.min.css file in the directory:

design/themes/basic/css/lib/bootstrap/bootstrap_grid_12.min.css

All described actions with the bootstrap_grid_16.min.css file must be perfomed with the bootstrap_grid_12.min.css file.

Home / Knowledge base / Look and feel (design) / Full-, Custom-Width, and Responsive Layouting with Bootstrap