{"id":6198,"date":"2021-03-06T17:22:12","date_gmt":"2021-03-06T17:52:12","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=6198"},"modified":"2023-07-06T15:27:34","modified_gmt":"2023-07-06T15:57:34","slug":"angular-from-scratch-tutorial-step-4-adding-bootstrap","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=6198","title":{"rendered":"Angular From Scratch Tutorial &#8211; Step 4: Adding Bootstrap"},"content":{"rendered":"<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6389\">NEXT: Angular From Scratch Tutorial &#8211; Step 5: Directives<\/a><\/p>\n<p><a class=\"row-title\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\" aria-label=\"\u201cAngular From Scratch Tutorial \u2013 Step 3: Binding\u201d (Edit)\">PREVIOUS: Angular From Scratch Tutorial \u2013 Step 3: Binding<\/a><\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69fc6691034eb\" class=\"ez-toc-cssicon-toggle-label\"><span class><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\" \/><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\" \/><\/svg><\/span><\/span><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-69fc6691034eb\" checked aria-label=\"Toggle\"><nav><ul class=\"ez-toc-list ez-toc-list-level-1 \"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#TARGET\" title=\"TARGET\">TARGET<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Source_CodeDownload\" title=\"Source Code\/Download\">Source Code\/Download<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#INSTALLING_BOOTSTRAP\" title=\"INSTALLING BOOTSTRAP\">INSTALLING BOOTSTRAP<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#IMPORTANT_NOTE\" title=\"*IMPORTANT NOTE:\">*IMPORTANT NOTE:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#REFACTORING_THE_HTML_USING_BOOTSTRAP\" title=\"REFACTORING THE HTML USING BOOTSTRAP\">REFACTORING THE HTML USING BOOTSTRAP<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#1_Define_your_design\" title=\"1. Define your design.\">1. Define your design.<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#2_Refactoring_step-by-step_using_a_draft\" title=\"2. Refactoring step-by-step using a draft\">2. Refactoring step-by-step using a draft<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#3_Move_the_code_from_the_draft_to_the_first_line_of_appcomponenthtml_file\" title=\"3. Move the code from the draft to the first line of app.component.html file.\">3. Move the code from the draft to the first line of app.component.html file.<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#4_Adjusting_the_code_to_the_bootstrap_structure\" title=\"4. Adjusting the code to the bootstrap structure.\">4. Adjusting the code to the bootstrap structure.<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Remove_the_%E2%80%9CPricing%E2%80%9D_on_the_top\" title=\"Remove the &#8220;Pricing&#8221; on the top.\">Remove the &#8220;Pricing&#8221; on the top.<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Set_%E2%80%9CsiteBadge\" title=\"Set &#8220;siteBadge\">Set &#8220;siteBadge<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Set_title\" title=\"Set title\">Set title<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Next_step_%E2%80%93_moving_the_code_to_the_card\" title=\"Next step &#8211; moving the code to the card\">Next step &#8211; moving the code to the card<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Refactoring_the_cards_to_have_just_two_by_line\" title=\"Refactoring the cards to have just two by line\">Refactoring the cards to have just two by line<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#Final_Visual_After_Refactoring\" title=\"Final Visual After Refactoring\">Final Visual After Refactoring<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\/#NEXT\" title=\"NEXT\">NEXT<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"TARGET\"><\/span>TARGET<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Refactoring code to improve visual design using Bootstrap.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Source_CodeDownload\"><\/span>Source Code\/Download<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For more details, the source code may be found on <a href=\"https:\/\/github.com\/alsdias\/afsTutorial\">GitHub<\/a>, &#8220;step3&#8221; tag (includes step1 up to step3).<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"INSTALLING_BOOTSTRAP\"><\/span>INSTALLING BOOTSTRAP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are many ways to add bootstrap to an Angular project.<br>\nIn this step it will be used npm installer, one of the alternatives available at <a href=\"https:\/\/ultering.com\/it4us\/?p=5713\">Angular: Bootstrap Install Strategies<\/a>&nbsp;.<\/p>\n<p><strong>1. Import bootstrap.<\/strong><\/p>\n<p><span class=\"md-plain\">npm install bootstrap<\/span><\/p>\n<p>&nbsp;<\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-pair-s \"><strong><span class=\"md-plain\">2. Import the CSS.<\/span><\/strong><\/span><\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-pair-s \"><span class=\"md-plain\">Edit &#8220;angular.json&#8221; and set:<\/span><\/span><\/p>\n<pre class=\"md-fences md-end-block ty-contain-cm modeLoaded\" lang spellcheck=\"false\"><span role=\"presentation\">\"styles\": [<\/span>\n<span role=\"presentation\">  \"src\/styles.css\",<\/span>\n<span role=\"presentation\">  \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n<span role=\"presentation\">],<\/span><\/pre>\n<p class=\"md-end-block md-p\"><span class=\"md-pair-s \"><strong><span class=\"md-plain\"><br>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-plain\">npm install jquery popper.js \u2013save<\/span><\/p>\n<p>&nbsp;<\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-plain\">Edit angular.json and set:<\/span><\/p>\n<pre class=\"md-fences md-end-block ty-contain-cm modeLoaded\" lang spellcheck=\"false\"><span role=\"presentation\"> &nbsp; &nbsp; &nbsp;  \"scripts\": [<\/span>\n<span role=\"presentation\"> &nbsp; &nbsp; &nbsp;      \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n<span role=\"presentation\"> &nbsp; &nbsp; &nbsp;      \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n<span role=\"presentation\"> &nbsp; &nbsp; &nbsp;      \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n<span role=\"presentation\"> &nbsp; &nbsp; &nbsp;  ]<\/span><\/pre>\n<h4 class=\"md-end-block md-heading\"><\/h4>\n<p class=\"md-end-block md-p\"><strong><span class=\"md-plain\">OBSERVATION<\/span><\/strong><\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-plain\">Personally, I do not use the &#8220;@import&#8221; annotation. Something like this:<\/span><\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-pair-s \"><em><span class=\"md-plain\">@import &#8220;..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css&#8221;;<\/span><\/em><\/span><\/p>\n<p class=\"md-end-block md-p\"><span class=\"md-plain\">The configuration when is set on &#8220;angular.json&#8221; file is a much better option.<\/span><\/p>\n<h4 class=\"md-end-block md-heading\"><span class=\"ez-toc-section\" id=\"IMPORTANT_NOTE\"><\/span><span class=\"md-pair-s \"><strong><em>*<\/em><span class=\"md-plain\">IMPORTANT NOTE:<\/span><\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p class=\"md-end-block md-p\"><span class=\"md-plain\">Avoid using CSS resources under assets directory.<\/span><br>\n<span class=\"md-plain\">When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span><br>\n<span class=\"md-plain\">The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span><br>\n<span class=\"md-plain\">Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"REFACTORING_THE_HTML_USING_BOOTSTRAP\"><\/span>REFACTORING THE HTML USING BOOTSTRAP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Define_your_design\"><\/span>1. Define your design.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The application by this moment requires two different styles.<br>\nThe initial part containing the code created to this post may have a sequential listing with one or more columns.<br>\nThe second part, that imported from Angular&#8217;s ngModel examples (previous post) shall be preserved as it is.<\/p>\n<p>So to refactor the first part we may start choosing a <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/examples\/\">bootstrap template<\/a>.<br>\n<a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/examples\/pricing\/\">Pricing<\/a> seems to provide a good approach for this tutorial.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Refactoring_step-by-step_using_a_draft\"><\/span>2. Refactoring step-by-step using a draft<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Copy the code from <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/examples\/pricing\/\">Pricing<\/a> and paste to a file using an editor.<br>\nRemove the head&#8217;s code.<\/p>\n<p>Cut the code between the &lt;body&gt; elements to a new draft.<br>\nRemove the bottom stuff like Features, about, etc.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Move_the_code_from_the_draft_to_the_first_line_of_appcomponenthtml_file\"><\/span>3. Move the code from the draft to the first line of app.component.html file.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The result is:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6401\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1.jpg\" alt width=\"1000\" height=\"498\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1-300x149.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1-768x382.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6401 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20498%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"498\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20498%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1-300x149.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1-768x382.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_01-1.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Adjusting_the_code_to_the_bootstrap_structure\"><\/span>4. Adjusting the code to the bootstrap structure.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><strong><br>\nRemove the &#8220;Pricing&#8221; on the top.<\/strong><\/h4>\n<p>Find and remove this line:<\/p>\n<p>&lt;a class=&#8221;p-2 text-dark&#8221; href=&#8221;#&#8221;&gt;Pricing&lt;\/a&gt;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Set_%E2%80%9CsiteBadge\"><\/span><strong>Set &#8220;siteBadge<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Cut:<br>\n&lt;img&nbsp;[src]=&#8221;siteBadge&#8221;&gt;<\/p>\n<p>and replace &#8220;Princing&#8221; in this line:<br>\n&lt;h1&nbsp;class=&#8221;display-4&#8243;&gt;Pricing&lt;\/h1&gt;<\/p>\n<p>to get this:<br>\n&lt;h1 class=&#8221;display-4&#8243;&gt;&lt;img [src]=&#8221;siteBadge&#8221;&gt;&lt;\/h1&gt;<\/p>\n<p>Remove this line:<br>\n&lt;p&nbsp;class=&#8221;lead&#8221;&gt;Quickly&nbsp;build&nbsp;an&nbsp;effective&nbsp;pricing&nbsp;table&nbsp;for&nbsp;your&nbsp;potential&nbsp;customers&nbsp;with&nbsp;this&nbsp;Bootstrap&nbsp;example.&nbsp;It&#8217;s&nbsp;built&nbsp;with&nbsp;default&nbsp;Bootstrap&nbsp;components&nbsp;and&nbsp;utilities&nbsp;with&nbsp;little&nbsp;customization.&lt;\/p&gt;<\/p>\n<h4><strong><br>\nSet title<\/strong><\/h4>\n<p>Cut:<br>\n&lt;h2&gt;{{title}}&lt;\/h2&gt;<\/p>\n<div>\n<div>\n<p>and replace &#8220;Company name&#8221;:<\/p>\n<div>\n<div>\n<p>&lt;h5&nbsp;class=&#8221;my-0&nbsp;mr-md-auto&nbsp;font-weight-normal&#8221;&gt;Company&nbsp;name&lt;\/h5&gt;<\/p>\n<p>to get this:<\/p>\n<div>\n<div>&lt;h5&nbsp;class=&#8221;my-0&nbsp;mr-md-auto&nbsp;font-weight-normal&#8221;&gt;{{title}}&lt;\/h5&gt;<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Next_step_%E2%80%93_moving_the_code_to_the_card\"><\/span>Next step &#8211; moving the code to the card<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>&nbsp;<\/p>\n<div><span role=\"presentation\"><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6404\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02.jpg\" alt width=\"1000\" height=\"495\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02-300x149.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02-768x380.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6404 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20495%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"495\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20495%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02-300x149.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02-768x380.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_02.jpg\"><\/span><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div>Copy the code below to a draft using an editor.<\/div>\n<div><\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6405\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03.jpg\" alt width=\"1489\" height=\"1030\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03.jpg 1489w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03-300x208.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03-768x531.jpg 768w\" sizes=\"(max-width: 1489px) 100vw, 1489px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6405 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201489%201030%22%3E%3C%2Fsvg%3E\" alt width=\"1489\" height=\"1030\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201489%201030%22%3E%3C%2Fsvg%3E 1489w\" sizes=\"(max-width: 1489px) 100vw, 1489px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03.jpg 1489w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03-300x208.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03-768x531.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_03.jpg\"><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div>Copy the code to be moved to the cards no another draft.<br>\nThe image shows almost all code. Make sure to move the full three blocks.<\/div>\n<h2><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6406\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_04.jpg\" alt width=\"685\" height=\"983\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_04.jpg 685w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_04-209x300.jpg 209w\" sizes=\"(max-width: 685px) 100vw, 685px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6406 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20685%20983%22%3E%3C%2Fsvg%3E\" alt width=\"685\" height=\"983\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20685%20983%22%3E%3C%2Fsvg%3E 685w\" sizes=\"(max-width: 685px) 100vw, 685px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_04.jpg 685w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_04-209x300.jpg 209w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_04.jpg\"><\/h2>\n<p>&nbsp;<\/p>\n<p>Move:<br>\n&lt;col span=&#8221;{{1 + 1}}&#8221; style=&#8221;background-color:#D2D2D2&#8243;&gt;<\/p>\n<p>as:<br>\n{{1 + 1}}&#8221; style=&#8221;background-color:#D2D2D2&#8243;<\/p>\n<p>replacing:<br>\n&lt;h4 class=&#8221;my-0 font-weight-normal&#8221;&gt;Free&lt;\/h4&gt;<\/p>\n<p>to get this:<br>\n&lt;h4 class=&#8221;my-0 font-weight-bold&#8221;&gt;{{1 + 1}}&#8221; style=&#8221;background-color:#D2D2D2&#8243;&lt;\/h4&gt;<\/p>\n<p>Now, move the &#8220;table&#8221; as shown below:<\/p>\n<p>&lt;table&gt;<br>\n&lt;tr&gt;<br>\n&lt;th&gt;ISBN&lt;\/th&gt;<br>\n&lt;th&gt;Title&lt;\/th&gt;<br>\n&lt;th&gt;Price&lt;\/th&gt;<br>\n&lt;\/tr&gt;<br>\n&lt;tr&gt;<br>\n&lt;td&gt;3476896&lt;\/td&gt;<br>\n&lt;td&gt;Angular for Now&lt;\/td&gt;<br>\n&lt;td&gt;$53&lt;\/td&gt;<br>\n&lt;\/tr&gt;<br>\n&lt;\/table&gt;<\/p>\n<p>replacing:<\/p>\n<div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&nbsp;class=&#8221;card-title&nbsp;pricing-card-title&#8221;&gt;$0&nbsp;&lt;small&nbsp;class=&#8221;text-muted&#8221;&gt;\/&nbsp;mo&lt;\/small&gt;&lt;\/h1&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&#8221;list-unstyled&nbsp;mt-3&nbsp;mb-4&#8243;&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helo<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;<\/div>\n<\/div>\n<div><\/div>\n<div>\n<p>to get this:<\/p>\n<div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;card-body&#8221;&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;ISBN&lt;\/th&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Title&lt;\/th&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Price&lt;\/th&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3476896&lt;\/td&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Angular&nbsp;for&nbsp;Now&lt;\/td&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;$53&lt;\/td&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/table&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>We get this:<\/div>\n<div><\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6407\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05.jpg\" alt width=\"852\" height=\"146\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05.jpg 852w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05-300x51.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05-768x132.jpg 768w\" sizes=\"(max-width: 852px) 100vw, 852px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6407 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20852%20146%22%3E%3C%2Fsvg%3E\" alt width=\"852\" height=\"146\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20852%20146%22%3E%3C%2Fsvg%3E 852w\" sizes=\"(max-width: 852px) 100vw, 852px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05.jpg 852w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05-300x51.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05-768x132.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_05.jpg\"><\/div>\n<div>We see that more space to the cards would become better.<\/div>\n<div><\/div>\n<h4><span class=\"ez-toc-section\" id=\"Refactoring_the_cards_to_have_just_two_by_line\"><\/span>Refactoring the cards to have just two by line<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div>\n<div>\n<p>From:<\/p>\n<div>\n<div>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;card-deck&nbsp;mb-3&nbsp;text-center&#8221;&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;card&nbsp;mb-4&nbsp;box-shadow&#8221;&gt;<\/div>\n<div><\/div>\n<\/div>\n<p>To:<\/p>\n<\/div>\n<div>\n<div>\n<div>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;card-deck&nbsp;mb-12&nbsp;text-center&#8221;&gt;<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;card&nbsp;mb-6&nbsp;box-shadow&#8221;&gt;<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\n<p>To get this:<\/p>\n<\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6409\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06.jpg\" alt width=\"862\" height=\"159\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06.jpg 862w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06-300x55.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06-768x142.jpg 768w\" sizes=\"(max-width: 862px) 100vw, 862px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6409 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20862%20159%22%3E%3C%2Fsvg%3E\" alt width=\"862\" height=\"159\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20862%20159%22%3E%3C%2Fsvg%3E 862w\" sizes=\"(max-width: 862px) 100vw, 862px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06.jpg 862w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06-300x55.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06-768x142.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_06.jpg\"><\/div>\n<div>Now we may improve the content using the table structure converting to bootstrap, but it is not necessary.<br>\nJust adding <em>cellpadding=&#8221;10px&#8221; cellspacing=&#8221;10px&#8221;<\/em> solves the issue.<\/div>\n<div>\n<p>So, &lt;table&gt; comes to:<\/p>\n<div>\n<div>&lt;table cellpadding=&#8221;10px&#8221; cellspacing=&#8221;10px&#8221;&gt;<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>Result:<\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6411\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_07.jpg\" alt width=\"426\" height=\"153\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_07.jpg 426w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_07-300x108.jpg 300w\" sizes=\"(max-width: 426px) 100vw, 426px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6411 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20426%20153%22%3E%3C%2Fsvg%3E\" alt width=\"426\" height=\"153\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20426%20153%22%3E%3C%2Fsvg%3E 426w\" sizes=\"(max-width: 426px) 100vw, 426px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_07.jpg 426w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_07-300x108.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_07.jpg\"><\/div>\n<div><\/div>\n<div>Now, we just repeat the sames steps for all other blocks to complete the task.<\/div>\n<div><\/div>\n<div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Final_Visual_After_Refactoring\"><\/span>Final Visual After Refactoring<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6423\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08.jpg\" alt width=\"986\" height=\"947\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08.jpg 986w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08-300x288.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08-768x738.jpg 768w\" sizes=\"(max-width: 986px) 100vw, 986px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6423 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20986%20947%22%3E%3C%2Fsvg%3E\" alt width=\"986\" height=\"947\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20986%20947%22%3E%3C%2Fsvg%3E 986w\" sizes=\"(max-width: 986px) 100vw, 986px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08.jpg 986w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08-300x288.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08-768x738.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/post6198_08.jpg\"><\/p>\n<div><\/div>\n<div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"NEXT\"><\/span>NEXT<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6389\">NEXT: Angular From Scratch Tutorial &#8211; Step 5: Directives<\/a><\/p>\n<p><a class=\"row-title\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\" aria-label=\"\u201cAngular From Scratch Tutorial \u2013 Step 3: Binding\u201d (Edit)\">PREVIOUS: Angular From Scratch Tutorial \u2013 Step 3: Binding<\/a><\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Angular From Scratch Tutorial &#8211; Index NEXT: Angular From Scratch Tutorial &#8211; Step 5: Directives PREVIOUS: Angular From Scratch Tutorial \u2013 Step 3: Binding &nbsp; TARGET Refactoring code to improve visual design using Bootstrap. Source Code\/Download For more details, the source code may be found on GitHub, &#8220;step3&#8221; tag (includes step1 up to step3). &nbsp; &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=6198\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;Angular From Scratch Tutorial &#8211; Step 4: Adding Bootstrap&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[192,26],"tags":[],"class_list":["post-6198","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6198"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6198\/revisions"}],"predecessor-version":[{"id":7185,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6198\/revisions\/7185"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}