{"id":13632,"date":"2022-03-15T14:12:41","date_gmt":"2022-03-15T07:12:41","guid":{"rendered":"https:\/\/anvilaw.com\/vi\/?page_id=13632"},"modified":"2022-03-22T16:03:12","modified_gmt":"2022-03-22T09:03:12","slug":"bootstrap-4-shortcodes-demo-4-6-4","status":"publish","type":"page","link":"https:\/\/anvilaw.com\/vi\/bootstrap-4-shortcodes-demo-4-6-4\/","title":{"rendered":"Bootstrap 4 Shortcodes Demo 4.6.4"},"content":{"rendered":"

Rows and Columns<\/h2>\n
\n
3 same size columns on medium and larger screens<\/div>\n
\n
\n
\nColumn 1 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit nam dictum potenti, bibendum varius pellentesque etiam conubia porttitor efficitur mollis eu.<\/p>\n<\/div>\n

\nColumn 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla vivamus vestibulum, proin nunc fusce est nascetur lectus sapien quam class, rutrum commodo blandit cursus eget orci integer mus viverra.<\/p>\n<\/div>\n

\nColumn 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit ad auctor, torquent vestibulum lobortis mollis facilisi integer facilisis purus augue felis, donec sapien mus fringilla conubia eros ut maximus.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

Narrow your browser window to see the columns stack. <\/div>\n<\/div>\n
\n
\n
3 columns<\/div>\n
\n
\n
\nColumn 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit semper, libero eros quis turpis proin himenaeos suscipit.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit aliquet posuere proin litora, nulla fames sem hendrerit feugiat eros odio morbi eu phasellus.<\/p>\n<\/div>\n

\nColumn 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit taciti fringilla tincidunt eu nullam vulputate, curabitur a dapibus aptent malesuada ad diam eget montes cras suspendisse laoreet.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

These columns will not stack when you narrow your browser window. <\/div>\n<\/div>\n
\n
\n
2 columns with an offset in between<\/div>\n
\n
\n
\nColumn 1 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit maximus facilisis litora, imperdiet feugiat netus odio vestibulum aenean curabitur erat aliquam phasellus integer, purus ultricies turpis aliquet duis suscipit ligula ad lacinia.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit commodo, urna justo tellus tincidunt auctor enim faucibus magnis, interdum dapibus volutpat aliquet cras orci pellentesque.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

These columns will not stack when you narrow your browser window. <\/div>\n<\/div>\n
\n
\n
Nested Rows and Columns<\/div>\n
\n
\n
\nCol 1
\n
Col 1.1<\/div>\n
Col 1.2<\/div>\n<\/div>\n<\/div>\n
\nCol 2
\n
Col 2.1<\/div>\n
Col 2.2<\/div>\n<\/div>\n<\/div>\n
\nCol 3
\n
Col 3.1<\/div>\n
Col 3.2<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
These columns will not stack when you narrow your browser window. <\/div>\n<\/div>\n

Responsive Embed<\/h2>\n
\n
Embedded Video<\/div>\n
\n

No real video<\/p><\/div>\n<\/div>\n

Narrow your browser window to see the video size adjust. <\/div>\n<\/div>\n

Responsive Utilities<\/h2>\n
\n
Show text depending on screen size<\/div>\n
\n

Sample 1: This text disappears on small and extra small screens.<\/h4>\n
\n

Lorem ipsum dolor sit amet consectetur adipiscing elit libero, et pulvinar blandit felis id dignissim gravida, per natoque facilisis netus nisl maximus iaculis.<\/p>\n<\/div>\n

Sample 2: This text will not be shown on large and extra large screens.<\/h4>\n
\n

Lorem ipsum dolor sit amet consectetur adipiscing elit fames enim dignissim accumsan finibus, mi scelerisque auctor fringilla ad volutpat vehicula mattis ullamcorper class mauris neque, feugiat commodo vel consequat magna mollis ac diam quam potenti per.<\/p>\n<\/div>\n<\/div>\n

Narrow and widen your browser window to see the effect. <\/div>\n<\/div>\n

Cards<\/h2>\n
\n
Simple card with a body element<\/div>\n
\n
\n
\n