{"id":4884,"date":"2023-08-01T03:03:24","date_gmt":"2023-08-01T03:03:24","guid":{"rendered":"https:\/\/contentviewspro.com\/documentation\/?post_type=docs&#038;p=4884"},"modified":"2026-04-07T13:08:36","modified_gmt":"2026-04-07T13:08:36","password":"","slug":"live-filter-show-filters-on-the-left-side-of-result","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-show-filters-on-the-left-side-of-result\/","title":{"rendered":"Live Filter \u2013 show filters on the left\/right side of result"},"content":{"rendered":"<p>There are 2 ways to do it:<\/p>\n<h3>A. With Content Views Pro since 5.8.4<\/h3>\n<p>In the &#8220;Style Settings&#8221; tab, please select the checkbox <code>Wrap live filters to a div<\/code>,<br \/>\nthen enter value for 2 text fields as below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4142\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/11\/Split-live-filters-and-results-CVP-5.8.4.png\" alt=\"\" width=\"641\" height=\"180\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/11\/Split-live-filters-and-results-CVP-5.8.4.png 641w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/11\/Split-live-filters-and-results-CVP-5.8.4-300x84.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/p>\n<ul>\n<li>HTML Class For View: <code>col-md-8 col-sm-6<\/code><br \/>\n(To show it wider, please use <code>col-md-9 col-sm-6<\/code>)<\/li>\n<li>Text field below the Live Filters checkbox: <code>col-md-4 col-sm-6<\/code><br \/>\n(To show it narrower, please use <code>col-md-3 col-sm-6<\/code>)<\/p>\n<p>To show filters on the <strong>right side<\/strong>, please use: <code>col-md-4 col-sm-6 pull-right<\/code><\/li>\n<\/ul>\n<p>To change the width of each side, please change the value <code>col-md-8<\/code>\u00a0and\u00a0<code>col-md-4<\/code>\u00a0(the sum of numbers must be\u00a0<code>12<\/code>).<\/p>\n<p>The <code>col-sm-6<\/code> value helps to show filters on the side of result on Tablet devices.<br \/>\nTo show filters above result on Tablet devices, please remove this value.<\/p>\n<p>To show filters on the side of results on Mobile devices, please add <code data-start=\"878\" data-end=\"888\">col-xs-6<\/code> to both elements.<\/p>\n<h3>B. With Content Views Pro before 5.8.4<\/h3>\n<p>For older Content Views Pro version, you can show filters on the left side and result on the right side with this code:<\/p>\n<blockquote><p>Notice: when using this solution, the page <ins>will be reloaded<\/ins> when selecting or changing the filter option.<\/p><\/blockquote>\n<pre style=\"font-size: 13px;\">&lt;div class=\"pt-cv-wrapper\"&gt;\n\t&lt;div class=\"row\"&gt;\n\t\t&lt;div class=\"col-md-4 col-sm-6\"&gt;\n\t\t\t[pt_view id=\"VIEW_ID\" show=\"filter\"]\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=\"col-md-8 col-sm-6\"&gt;\n\t\t\t[pt_view id=\"VIEW_ID\" show=\"result\"]\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>You can switch positions of shortcodes to show filters on the right side, result on the left side.<br \/>\nTo change the width of each side, please change the <code>col-md-4<\/code> and <code>col-md-8<\/code> (the sum of numbers must be <code>12<\/code>).<\/p>\n<p>Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are 2 ways to do it: A. With Content Views Pro since 5.8.4 In the &#8220;Style Settings&#8221; tab, please select the checkbox Wrap live filters to a div, then enter value for 2 text fields as below: HTML Class For View: col-md-8 col-sm-6 (To show it wider, please use col-md-9 col-sm-6) Text field below &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-show-filters-on-the-left-side-of-result\/\"> <span class=\"screen-reader-text\">Live Filter \u2013 show filters on the left\/right side of result<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[46],"doc_tag":[35],"class_list":["post-4884","docs","type-docs","status-publish","hentry","doc_category-live-filter","doc_tag-live-filter"],"year_month":"2026-09","word_count":275,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Live Filter (Frontend Search &amp; Filter)","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/live-filter\/"}],"doc_tag_info":[{"term_name":"live filter","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/live-filter\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/4884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=4884"}],"version-history":[{"count":15,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/4884\/revisions"}],"predecessor-version":[{"id":6190,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/4884\/revisions\/6190"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=4884"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=4884"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=4884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}