borg2borg

A Bootstrap 'n Journey

Dedicated to Learning, Developing and Deploying the Bootstrap v4.6x framework.

"Resistance is futile..." Assimilate!
-Thus saith The BORG


Get borg2borg Updates Reach Out

Borg Updates - Borg Releases 0.1.7

Bootstrap'n 4 - A Bootstrap journey...

Bootstrap - A popular UI (User Interface, Front-end) framework; front-end structure built to deploy, run-lean, scale mobile-first and enhance open web development toolkit. The framework uses modern web languages, iconography and grid layout to quickly gain efficicanies when prototyping, building and launching web 'stuff'; anythin web related: project, sites, forms and layouts.

As mentioned above; briefly. This is our Bootstrap'n Journey. We include all of the wins, issues, snaffos, pain-points, and hours lost etc.

The History: Bootstrap was cobbled together by the Twitter (TWBS for short) brain-trust (i.e. development sweat and tears) some 11 years ago. Now, freely distributed, open-source, and readily available via multiple sources - Bootstrap - Get BootStrap or via Github - TWBS - Bootstrap. For more information, check out the resources, documentation and examples available over on www.getbootstrap.com.

The Takeaway: Why Bootstrap? Welp, no simple answer here but, the framework (Bootstrap) is free unlike most things in life, we are doing out part, paying it forward...

Easy to deploy: Concept-to-deployment. It's certainly has it's own issues; its own animal. Right or wrong, the key is mobile first, flexibility and responsive (fluid/flexible form regardless of device or browser type: phones, tablets and desktops - Google Chrome, Apple Safari, Brave, Firefox Web/Mobile, IE 10+ etc.) designs in a pre-packaged form.

Get Bootstrap Download Bootstrap

Bootstrap docs - All releases

What's Next

Download, install and run the Bootstrap framework source code

Bootstrap Download, Unpack...Ready-To-Code.

Files unpacked, text editor up and ftp client connencted... hosting services ready... In the spirt of Captain Jean-Luc, "Engage". Let's start with the bare-minimum. Look for 'code' references, included in the body of the site e.g.

  • .container - max-width: 100%; responsive breakpoints
  • .container-fluid - width:100%; responsive at all breakpoints within the Bootstrap grid

Look for Bootstrap class elements (above), code examples and tips, screen representation of the class and the code to be used on your own work.

Sample Code: look for the star... including preloaded text which describes the sections to come below. One, the example or how the code will display on screen. Two, the code that generates what shall print to the screen.

Astrononymous

***********************************************

***********************************************

Coming Soon!

Com'n To An Astroid Near You!

Created your Astrononymous profile today! Private, secure astroid rock and more...

Ohh! And by the way, we are going to build out 'Astrononymous' as a learning site for JQuery using Bootstrap v5 elements etc. and again, another test case to compliment our Python testcase. Be Aware of the Burmpy!

***********************************************

Code Snippet - Containers

<div class='example border p-5'>
<div class='container noSpace'>
<h1>H1 Title Text</h1>
<p>Paragraph text, add some text here!</p>
</div>
</div>

What Do I Need?

Tools:

Recommendation: Just keep it simple, don't over think it... we've been using some of these apps for 15, 20+ years in some cases. Although, some have evolved into premium, pay applications we've stuck with a few and added in the plugins. Most are customizable, assuming free/premium(free, student version/rate, full version/rate) options are available. So, we suggest Sublime Text (full), CyberDuck (full), GoDaddy/HostGator (shared/hardware) - AWS (shared or dedicated cloud), Github

Skills:

  • Ideally your should have knowledge or at least some noob skills - CSS, HTML, JS, SASS, PHP. If not, we all start somewhere, there are cut/paste examples to help you in your journey.
  • File Transfer - FTP (moving files back and forth from a local environment to a hosted web platform)
  • Web Browser Development Tools

Moving along now, how do I create my first Bootstrap 4 enabled page? First, we need a few html elements, shown below (may have to include images, if the 'code elment' keeps acting up!)

Install or Include Bootstrap In Your Project

...Straight From The Source:

Downloadable assets, source code and/or install scripts for various package managers. We will leave this portion to the experts over on the Get Bootstrap. Like many things, we want to show you the benefits, the pain-points and the lessons learned... however, not in this section. We reserve the right to 'inflict MAX pain'!

Get Started

Dive right in, let's get started! We have 4 options to choose from, Containers, Basics, Advanced and Reference. Let's start with the containers classes.

Containers

Let's get bootstrap'n, hop on over to the containers section. More than an intro per say, we dive right into the Bootstrap classes in which 'contain' things or data. Example would be the Jumbotron, or the most important section of the site, the main message container.

We highlight the following classes within the Containers Section: Containers, Grid Systems, Tables, Jumbotron, Cards, Nav, Navbar, Scrollspy, Flexbox, Inputs, Input Groups, Custom Forms

Basics

Moving from containers or containment... Basic bootstrap'n classes or default sizes help you quickly get upto speed on what to place in the containers: i.e. typography, colors, buttons and more. Let's go!

We highlight the following classes within the Basics Section: Default(s), Colors, Alerts, Buttons, Buttong Groups, Pagination, Breadcrumbs, Images, Tooltips, Popover, Icons

Advanced

Advanced bootstrap'n... more things like modals, carousels, progress bars and badging which one might assume may be back-end driven or dyanmic data driven. Advance your Bootstrap'n experience.

We highlight the following classes within the Advanced Section: Collapse, Media Objects, Carosuels, Modals, Toast, Progress Bar, Badges, Spinners, Filters, Templates, Other

Reference Materials

Need source references? We've got your references right here. Don't forget and if you do, we always have the right references to fall back on. Sieze The Day!

We highlight the following classes within the Reference Section: All Bootstrap Classes, References, Utilities, Borders, Radius, Floats, Clearfix, Spacing, Shadow, Alignment, Embedded Media, Visibility, Fixed, Close, Block, Fix, Classes

Other Work, Services And Resources


MBEMO

MBEMO PHP

{1Fyr}}

A Fire A Month
(Bootstrap v3)

BurmPy

Future Python Site
(Bootstrap v5)


Sallee Technology llc

SALLEE TECHNOLOGY

Parent Organization

Code 1

Need Help? How might we help? Connect with us, reach out via email, phone or contact form