Newbe Dev Stack

Example 1: text-bold bootstrap < p class = " font-weight-bold " > Bold text. </ p > Example 2: font weight bootstrap class < p class = " font-weight-bold " > Bold text. </ p > < p class = " font-weight-normal " > Normal weight text. </ p > < p class = " font-weight-light " > Light weight text. </ p > < p class = " font-italic " > Italic text. </ p > Example 3: bootstrap italic < p class = " font-italic " > Italic text. </ p > Example 4: bootstrap 4 font bold font-weight-bold Example 5: bootstrap alignemnt paragraph < p class = " text-justify " > Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae i...

Example 1: bootstarp 5 < link rel = " stylesheet " href = " https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css " integrity = " sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK " crossorigin = " anonymous " > Example 2: bootstrap 5 <!-- Bootstrap 5 Starter template --> <! DOCTYPE html > < html lang = " en " > < head > <!-- Required meta tags --> < meta charset = " utf-8 " /> < meta name = " viewport " content = " width=device-width, initial-scale=1 " /> <!-- Bootstrap CSS --> < link href = " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " rel = " stylesheet " integrity = " sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1 " ...

Example 1: read file javascript // As with JSON, use the Fetch API & ES6 fetch('something.txt') .then(response => response.text()) .then(data => { // Do something with your data console.log(data); }); Example 2: html get text from file < embed src = " file.txt " > // This will show the text contained in file.txt in the page

Example 1: angular loop < li *ngFor = " let a of fakeArray; let index = index " > Something {{ index }} </ li > Example 2: angular javascript for loop content_copy < h2 > Products </ h2 > < div *ngFor = " let product of products " > </ div > Example 3: angular for loop let array = [1,2,3]; for (let i = 0; i < array.length; i++) { console.log(array[i]); } Example 4: angular for loop let array = [1,2,3]; array.forEach(function (value) { console.log(value); });

Example 1: prevent button from submitting form function myFunc(e){ e.preventDefault(); } Example 2: prevent button form submit < button type = " button " > Button </ button >

Example 1: bootstrap show modal jquery $('#myModal').modal('toggle'); $('#myModal').modal('show'); $('#myModal').modal('hide'); Example 2: open modal in jqwuery $("#myModal").modal('show') Example 3: open modal in jqwuery $("#myModal").modal() Example 4: show modal in bootstrap 4 < button type = " button " class = " btn btn-primary " data-toggle = " modal " data-target = " #exampleModal " data-whatever = " @mdo " > Open modal for @mdo </ button > < button type = " button " class = " btn btn-primary " data-toggle = " modal " data-target = " #exampleModal " data-whatever = " @fat " > Open modal for @fat </ button > < button type = " button " class = " btn btn-primary " data-toggle = " modal " data-target = " #exampleModal "...

Example 1: navbar right bootstrap 4 < nav class = " navbar navbar-expand-lg navbar-light bg-light " > < a class = " navbar-brand " href = " # " > Navbar </ a > < button class = " navbar-toggler " type = " button " data-toggle = " collapse " data-target = " #navbarSupportedContent " aria-controls = " navbarSupportedContent " aria-expanded = " false " aria-label = " Toggle navigation " > < span class = " navbar-toggler-icon " > </ span > </ button > < div class = " collapse navbar-collapse " id = " navbarSupportedContent " > < ul class = " navbar-nav mr-auto " > < li class = " nav-item active " > < a class = " nav-link " href = " # " > Home < span class = " sr-only " > (current) ...

Example: bootstrap table < table class = " table " > < thead > < tr > < th scope = " col " > # </ th > < th scope = " col " > First </ th > < th scope = " col " > Last </ th > < th scope = " col " > Handle </ th > </ tr > </ thead > < tbody > < tr > < th scope = " row " > 1 </ th > < td > Mark </ td > < td > Otto </ td > < td > @mdo </ td > </ tr > < tr > < th scope = " row " > 2 </ th > < td > Jacob </ td > < td > Thornton </ td > < td > @fat </ td > </ tr > < tr > < th scope = " row " > 3 </ th > < td > Larry </ td > ...

Example: javascript open link in new tab function NewTab() { window.open( "https://www.yourURL.com", "_blank"); }

Example 1: price range slider bootstrap 4 < input type = " range " name = " range " step = " 50000 " min = " 100000 " max = " 1000000 " value = " " onchange = " rangePrimary.value=value " > < input type = " text " id = " rangePrimary " /> Example 2: bootstrap range slider < label for = " customRange3 " class = " form-label " > Example range </ label > < input type = " range " class = " form-range " min = " 0 " max = " 5 " step = " 0.5 " id = " customRange3 " >

Example 1: table bootstrap with scrool < div style = " height : 600 px ; overflow : scroll ; " > <!-- change height to increase the number of visible row --> < table > </ table > </ div > Example 2: table class in bootstrap < table class = " table " > < thead class = " thead-dark " > < tr > < th scope = " col " > # </ th > < th scope = " col " > First </ th > < th scope = " col " > Last </ th > < th scope = " col " > Handle </ th > </ tr > </ thead > < tbody > < tr > < th scope = " row " > 1 </ th > < td > Mark </ td > < td > Otto </ td > < td > @mdo </ td > </ tr > < tr > < th scope = " row " > 2...

Example: bootstrap gem install bootstrap -v 4.4.1

Example 1: center a div in css .container { display: flex; justify-content: center; align-items: center; } Example 2: centering css elements // add to the parent element .parent { display: grid; place-items: center; } Example 3: how to center text in css .class { text-align: center; } Example 4: how to center a div .container { ... display: flex; justify-content: center; } Example 5: css center div <!-- Simple CSS CENTER DIV Example * See Fiddle in link for PoC * --> < div class = " parent " > < div class = " child " > < p > Eh Up Me Duck! </ p > </ div > </ div > < style > .parent { /* Just for aesthetics: see fiddle */ border : 1 px solid black ; padding : 2 px ; } .child { border : 1 px solid red ; width : 50 % ; /* This is where the magic happens */ margin-left : auto ; margin-right : auto ; /************...