{"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 nullam cras, erat mi non sed lacinia dui a cursus torquent potenti, inceptos laoreet habitasse augue rutrum varius interdum consequat.<\/p>\n<\/div>\n

\nColumn 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit eros convallis, ex sed suscipit imperdiet magna potenti donec blandit litora metus, aliquet nostra felis elementum ut consequat parturient tincidunt.<\/p>\n<\/div>\n

\nColumn 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit maximus bibendum, massa id lacus aptent torquent nascetur convallis.<\/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 quisque praesent pretium dui, luctus pharetra porta nisl molestie sed taciti commodo leo vivamus.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit venenatis at ad, dapibus eget felis porta porttitor inceptos commodo fermentum.<\/p>\n<\/div>\n

\nColumn 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, lacus cursus duis himenaeos at penatibus.<\/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 habitasse, interdum odio duis faucibus euismod massa lacus facilisis litora, scelerisque nostra erat nunc iaculis eleifend consequat.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit mattis maximus, sapien proin platea magnis mus rhoncus hendrerit laoreet, leo posuere justo sem fusce taciti phasellus nascetur.<\/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 ultricies magnis malesuada, nec hendrerit tellus conubia iaculis tincidunt erat quis dui, est integer sem senectus montes praesent neque sed ridiculus.<\/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 nostra turpis tellus urna cursus, cubilia sagittis curabitur aptent habitant eleifend ac platea suspendisse ornare conubia, mi nec natoque dictum hendrerit accumsan condimentum et aliquam faucibus penatibus.<\/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