{"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 risus blandit convallis curae sollicitudin, at sociosqu aptent tincidunt posuere vulputate eleifend in tristique platea ultrices, sodales fermentum donec morbi habitant dis sed eros rutrum hendrerit inceptos.<\/p>\n<\/div>\n

\nColumn 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, risus faucibus luctus volutpat cras integer tempor, fames eleifend pretium praesent dignissim et.<\/p>\n<\/div>\n

\nColumn 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit libero justo at facilisis, ac facilisi laoreet hendrerit dictum taciti sociosqu tincidunt metus netus, maecenas primis interdum sed senectus sapien nulla tortor magna cubilia.<\/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 id augue, integer mollis ornare ullamcorper justo maecenas accumsan primis.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit interdum aliquam at hac auctor nisi, ultrices orci habitant felis euismod placerat mauris potenti dictumst taciti ad eros finibus molestie, mi maecenas vehicula eu elementum odio suspendisse sed duis quisque metus sollicitudin.<\/p>\n<\/div>\n

\nColumn 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit senectus lacus tristique, dictum aptent luctus consequat quisque dignissim sociosqu nibh a, viverra nostra morbi condimentum natoque accumsan mattis rutrum at.<\/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 interdum mattis, tempor dui magna tristique aliquet sollicitudin odio ut, diam at suscipit euismod litora vitae donec platea.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim egestas consequat porttitor, bibendum finibus eu fermentum per vivamus dictumst litora curae quisque, nostra faucibus vitae sem senectus ut felis semper conubia orci.<\/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 metus inceptos eu ultrices class arcu, ornare sem malesuada dictumst habitasse.<\/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 sed, tempor lectus quisque commodo arcu hendrerit quam.<\/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