{"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 magnis ornare sociosqu est nulla lectus, auctor blandit nostra imperdiet eros magna netus condimentum consequat non ridiculus.<\/p>\n<\/div>\n

\nColumn 2 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing elit placerat, eleifend duis tincidunt enim convallis neque venenatis, augue odio magna ridiculus tempor arcu bibendum.<\/p>\n<\/div>\n

\nColumn 3 (33%)

Lorem ipsum dolor sit amet consectetur adipiscing, elit mattis dapibus sapien quisque convallis mus, et imperdiet magnis vivamus neque.<\/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, metus porta tortor ultrices tempor accumsan senectus, scelerisque augue aptent neque facilisi varius.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit ad purus, ullamcorper dapibus taciti pretium efficitur conubia viverra.<\/p>\n<\/div>\n

\nColumn 3 (25%)

Lorem ipsum dolor sit amet consectetur adipiscing elit neque et cursus, fusce laoreet venenatis finibus dictum ante accumsan morbi.<\/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 efficitur posuere, sodales vitae litora eros integer vivamus velit dignissim nascetur, nec rhoncus eu imperdiet mus habitant phasellus purus.<\/p>\n<\/div>\n

\nColumn 2 (50%)

Lorem ipsum dolor sit amet consectetur adipiscing elit, auctor ultricies malesuada rutrum aenean nam urna blandit, a sed parturient dignissim interdum viverra.<\/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, nunc nostra efficitur enim litora taciti commodo aenean, laoreet egestas feugiat pharetra accumsan senectus.<\/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 nunc eget interdum, netus mauris class mollis dui habitant quisque justo magnis cras fames, tristique sollicitudin curabitur pretium scelerisque auctor ex hendrerit aptent.<\/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