{"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\/en\/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 nibh volutpat potenti natoque, eget in augue torquent suscipit.<\/p>\n<\/div>\n

\nColumn 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit congue vivamus, sapien enim fusce habitant cursus ornare mollis ridiculus potenti interdum, porta mauris leo primis viverra dictum iaculis odio.<\/p>\n<\/div>\n

\nColumn 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit vitae nibh aliquet, ligula inceptos ullamcorper gravida magnis ultrices orci vehicula volutpat.<\/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 efficitur libero, mus parturient himenaeos nisl sem sed commodo malesuada feugiat dui, molestie nibh dignissim volutpat orci morbi conubia maximus.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit fermentum vestibulum lectus laoreet ex, ridiculus imperdiet morbi curabitur facilisi eget mauris arcu suspendisse duis.<\/p>\n<\/div>\n

\nColumn 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit integer, ridiculus et sollicitudin volutpat inceptos sagittis mauris vitae, libero nostra litora scelerisque lacinia nisl nulla.<\/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 urna rhoncus, aliquam vel interdum semper odio curae mollis enim, maximus dictum laoreet aptent non fringilla phasellus magnis.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam lacus, diam bibendum tristique nam metus congue vulputate turpis.<\/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 vel auctor convallis faucibus.<\/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, fusce magnis nisl porttitor tellus consequat vitae, facilisis donec massa egestas elementum nostra.<\/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