"https://beefree.io/editor"
Bootstrap 4.0.0 Snippet by jeevan123456

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--<![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse;} </style> <![endif]--> </head> <body> <center class="wrapper"> <div class="webkit"> <!--[if (gte mso 9)|(IE)]> <table width="600" align="center"> <tr> <td> <![endif]--> <table class="outer" align="center"> <tr> <td class="full-width-image"> <img src="images/header.jpg" width="600" alt="" /> </td> </tr> <tr> <td class="one-column"> <table width="100%"> <tr> <td class="inner contents"> <p class="h1">Lorem ipsum dolor sit amet</p> <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p> </td> </tr> </table> </td> </tr> <tr> <td class="two-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="50%" valign="top"> <![endif]--> <div class="column"> <table width="100%"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/two-column-01.jpg" width="280" alt="" /> </td> </tr> <tr> <td class="text"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td> </tr> </table> </td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]> </td><td width="50%" valign="top"> <![endif]--> <div class="column"> <table width="100%"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/two-column-02.jpg" width="280" alt="" /> </td> </tr> <tr> <td class="text"> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. </td> </tr> </table> </td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> <tr> <td class="three-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/three-column-01.jpg" width="180" alt="" /> </td> </tr> <tr> <td class="text"> Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </td> </tr> </table> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/three-column-02.jpg" width="180" alt="" /> </td> </tr> <tr> <td class="text"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. </td> </tr> </table> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/three-column-03.jpg" width="180" alt="" /> </td> </tr> <tr> <td class="text"> Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. </td> </tr> </table> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> <tr> <td class="three-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner contents"> <p class="h2">Fashion</p> <p>Class eleifend aptent taciti sociosqu ad litora torquent conubia</p> <p><a href="#">Read requirements</a></p> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner contents"> <p class="h2">Photography</p> <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor</p> <p><a href="#">See examples</a></p> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner contents"> <p class="h2">Design</p> <p>Class aptent taciti sociosqu eleifend ad litora per conubia nostra</p> <p><a href="#">See the winners</a></p> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> <tr> <td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner contents"> <p class="h2">Cooking</p> <p>Class aptent taciti eleifend sociosqu ad litora torquent conubia</p> <p><a href="#">Read recipes</a></p> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner contents"> <p class="h2">Woodworking</p> <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor</p> <p><a href="#">See examples</a></p> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> <table class="column"> <tr> <td class="inner contents"> <p class="h2">Craft</p> <p>Class aptent taciti sociosqu ad eleifend litora per conubia nostra</p> <p><a href="#">Vote now</a></p> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> <tr> <td class="left-sidebar"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="100"> <![endif]--> <table class="column left"> <tr> <td class="inner"> <img src="images/sidebar-01.jpg" width="80" alt="" /> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="500"> <![endif]--> <table class="column right"> <tr> <td class="inner contents"> Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="#">Read on</a> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> <tr> <td class="right-sidebar" dir="rtl"> <!--[if (gte mso 9)|(IE)]> <table width="100%" dir="rtl"> <tr> <td width="100"> <![endif]--> <table class="column left" dir="ltr"> <tr> <td class="inner contents"> <img src="images/sidebar-02.jpg" width="80" alt="" /> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="500"> <![endif]--> <table class="column right" dir="ltr"> <tr> <td class="inner contents"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </div> </center> </body> </html>
/* Basics */ body { Margin: 0; padding: 0; min-width: 100%; background-color: #ffffff; } table { border-spacing: 0; font-family: sans-serif; color: #333333; } td { padding: 0; } img { border: 0; } .wrapper { width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .webkit { max-width: 600px; } .outer { Margin: 0 auto; width: 100%; max-width: 600px; } .inner { padding: 10px; } .contents { width: 100%; } p { Margin: 0; } a { color: #ee6a56; text-decoration: underline; } .h1 { font-size: 21px; font-weight: bold; Margin-bottom: 18px; } .h2 { font-size: 18px; font-weight: bold; Margin-bottom: 12px; } .full-width-image img { width: 100%; max-width: 600px; height: auto; } /* One column layout */ .one-column .contents { text-align: left; } .one-column p { font-size: 14px; Margin-bottom: 10px; } /*Two column layout*/ .two-column { text-align: center; font-size: 0; } .two-column .column { width: 100%; max-width: 300px; display: inline-block; vertical-align: top; } .two-column .contents { font-size: 14px; text-align: left; } .two-column img { width: 100%; max-width: 280px; height: auto; } .two-column .text { padding-top: 10px; } /*Three column layout*/ .three-column { text-align: center; font-size: 0; padding-top: 10px; padding-bottom: 10px; } .three-column .column { width: 100%; max-width: 200px; display: inline-block; vertical-align: top; } .three-column img { width: 100%; max-width: 180px; height: auto; } .three-column .contents { font-size: 14px; text-align: center; } .three-column .text { padding-top: 10px; } /* Left sidebar layout */ .left-sidebar { text-align: center; font-size: 0; } .left-sidebar .column { width: 100%; display: inline-block; vertical-align: middle; } .left-sidebar .left { max-width: 100px; } .left-sidebar .right { max-width: 500px; } .left-sidebar .img { width: 100%; max-width: 80px; height: auto; } .left-sidebar .contents { font-size: 14px; text-align: center; } .left-sidebar a { color: #85ab70; } /* Right sidebar layout */ .right-sidebar { text-align: center; font-size: 0; } .right-sidebar .column { width: 100%; display: inline-block; vertical-align: middle; } .right-sidebar .left { max-width: 100px; } .right-sidebar .right { max-width: 500px; } .right-sidebar .img { width: 100%; max-width: 80px; height: auto; } .right-sidebar .contents { font-size: 14px; text-align: center; } .right-sidebar a { color: #70bbd9; } /*Media Queries*/ @media screen and (max-width: 400px) { .two-column .column, .three-column .column { max-width: 100% !important; } .two-column img { max-width: 100% !important; } .three-column img { max-width: 50% !important; } } @media screen and (min-width: 401px) and (max-width: 620px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } }

Related: See More

Navbar With Icons
HTML Editor WYSIWYG Interface
Text editor toolbar

Questions / Comments: