Learn Bootstrap from Web Developer’s Perspective

Are you a back end developer finding it hard to get the Bootstrap basics or web design basis in general? Well, you’re not alone. Here is my take on web design & Bootstrap after involving in web development over half decade.

One thing is for sure, we are programmers and the logic flows in our vain! By no means, we are creative or artist individuals. I want you to be the same solid logical person throughout the article.

The abstract:

  1. Why do you need to learn?
  2. Don’t Get Overwhelmed.
  3. Uniform framework.
  4. Developers love to get things done.
  5. Grids are your best friend.
  6. Documentation.
  7. CDN.
  8. Pluggable JS.
  9. Third Party Support.
  10. A quick insight into Bootstrap.

Why do you need to learn?

A programming may always need to work with the web design a designer has created. Sometimes because you need to make it interactive or you need to write a code that shows results pulled from a database.

Don’t Get Overwhelmed:

The first thing I would suggest is please don’t get overwhelmed with the long lines of CSS code.

It’s natural for a designer to get overwhelmed by looking at the hundreds of line of logical code. But we know that entire code addresses two distinct logical situations.

The same goes for CSS code. A designer may need to write series of code (CSS classes) to address an UI element placement requirement.

The documentation is the best way to understand the CSS code. A good designer would always add a comment to a meaningful bunch of code. Like programming, it helps their peer designers and programmers like us understand the structure.

Uniform framework:

If you are into web programming for a long, you may know that that learning fresh set of CSS architecture for each new project is a pain! Why not have a uniform base styling framework?

Yes, the Bootstrap provides the responsive website design base CSS framework. A designer may make any number changes on top of the base framework. It’s a well tested and feature rich platform right out of the box.

Once the designers in your team start using the Bootstrap as the base framework, you no longer need to learn new CSS architecture for each project.

The basics you learned for the Bootstrap remains the same across the projects. It gives two advantages, the first it the UI consistency and the second minimal learning curve for developers and peer designing members!

Developers love to get things done:

We the developers love to get things done approach, meaning we are not creative individuals, our strength lays in the business logic creation and OOD based well-architectured code.

Having a uniform base CSS architecture for each project makes your life easy. You know how HTML components work, where to place them and what the required element hierarchy you need to use!

In short, you no longer need to ask the designers to add HTML element on the page just for the sake of styling. You understand the HTML architecture, you know where to place the element, and what CSS class to be applied to make it look uniform.

This might be the best work a designer could produce which makes the developer’s life easy and help them get the things done very quickly. Putting it all together makes the overall project development faster.

Grids are your best friend:

Responsive design or mobile friendly design has become the new standard for website design lately.

Designers may use the media query(@media if you can relate to it) to make the design responsive or mobile friendly. It may serve the responsive web design purpose but it adds an extra layer of learning for designers.

If the designing team is using the Bootstrap, you just need to know three basic things:

  1. col-lg-1 – col-ld-12 (lg stands for large – screen sizes >1200px)
  2. col-md-1 – col-md-12(md stands for medium – screen size >992px)
  3. col-sm-1 – col-sm-12(sm stands for small – screen size >768px)

These are the very popular Bootstrap grid system you need to know for responsive website design. Yes, that’s pretty much it!

Knowing these grid system’s basics will help you add or modify the element on existing website. You don’t need to ask your designers to add elements and make them responsive.

Documentation:

We developers love documentation. It’s actually our best buddy when it comes to understanding or learning the new thing. Bootstrap is no exception when it comes to a good documentation.

You will get pretty much everything from the documentation right from HTML elements example – usage, CSS architecture explanation, styling documentation, JS documentation and example.

If you follow the official Bootstrap documentation, you might not need to ask your designer for any help understanding the design architecture. If you follow it properly you might be able to create a new page on the fly keeping you base clear!

CDN:

I can relate to your passion for making the website load and work the fastest possible. And you have plenty of ways achieving this.

There are plenty of popular third party Bootstrap CDN providers like MaxCDN offering public Bootstrap resource CDN service.

There are thousands of websites actively using these CDN resources, there are high chances that your visitors already have the Bootstrap resource cached in their web browser. It helps your website load even faster.

Pluggable JS:

When it comes to interactivity and dynamic functionality, the Bootstrap gets you covered. You get everything modals, dropdowns, navigation menus, scroll spy, carousel, tab, tooltip, popover, collapse, and alerts.

You might not need each of this functionality in your project/page. Bootstrap take precise care about it as well. You get distinct JS for these functionalities. Include the one which you need.

Third Party Support:

Creating HTML elements on a blank canvas is kinda hard of us the developers, what’s the catch? Well, you have strong third party component support.

Consider a case you need to add data and time picker. It would take forever for us creating native looking date and time pickers. Don’t worry, you get plenty of ready made and well-tested components for the same purpose.

Do you need some special elements that are not offered right out of the box? Search for the component, make a test, integrate it in your project, and that’s it! Your job is pretty much done.

If in case you or your company needs a PSD to Bootstrap conversion, feel free to contact us. We are offering Responsive Bootstrap conversion of PSD files at very affordable price. We charge $50 for a home page and $10 for other pages.

A quick insight into Bootstrap:

Structure:

Let’s understand the Bootstrap structure real quick with developer’s perspective. The bootstrap divides the page into 12 equal size columns.

The LG, MD, and SM attributes we covered earlier help you create a responsive website. Here is the breakdown.

Learn Bootstrap from Developers perspective

The Bootstrap has underlying CSS that uses the media query to detect the screen size and apply the LG, MD, and SM styling accordingly.

The col-lg-12 represents an element to consume the complete width of either screen or its parent element. Whereas the col-lg-6 represents the element is supposed to consume half the width of the parent element or container.

The rule of thumb here is no element width can exceed the number 12. Meaning the max spanning an element could have is 12.

Here is an example for medium screens col-mx-xx that helps you understand the spanning and the element breakdown.

Bootstrap column structure - Learn bootstrap from developer perspective

  • The first row shows the twelve elements with col-md-1 are consuming the total space.
  • The second row shows the two elements filling the space with col-md-8 consuming the 60% of the total width whereas the second element consuming the rest 40% of the width.
  • The third row shows three rows consuming an equal amount of space 33% and filling the entire space.
  • And finally, the fourth row show two elements consuming same space i.e 50% and filling the entire space using col-md-6 for each element.

Elements:

There are plenty of elements available to make your design look good. We being the developer need not go through each of them. It might be a waste of your time and my energy explaining them.

Let’s capture the best elements that will need to use on regular basis:

Buttons:

Buttons are a core element of any web design. Bootstrap make your button creation styling journey lot easier by offering uniform classes.

Btn is the class that helps you transform the button element into style button element. On top of that, you have btn-default, btn-primary, btn-error, btn-warning, and btn-success.

Here is how you may use it:
<button class=”btn btn-success” name=”btnsuccess” id=”btnsuccess” >Success</button>

Links:

The same rule applies to links as well. You can make the links appear as the button while keeping all the links attributes and functionality.

You can use the same classes like btn, btn-default, btn-primary, btn-error, btn-warning, and btn-success.

Here is how you may use it:
<a href=”#” class=”btn btn-primary”>Link Text</a>

Text:

You might not need really care about this, as typography is the essential part of any web design. I’m pretty sure your design has already provided all the required styles that you may need in the project.

Here are some of the element that helps you add some special meaning to your texts.

Header texts:

The heading tag H1 should only be used once per page to introduce the topic. You may use the rest of the heading tags like H2-H7 to annotate the parent and child topics. There are no number of time limits on using these tags.

Paragraph:

This might be the widely used tag in any of the web design. This tag has default styling applied from bootstrap right out of the box. Make sure you use it when you need to add text or block of text into the web page.

Alignment:

There might be some time when you need to display the text to certain alignment like left, center, and right. You have three easy to remember classes for it.text-left: left justify the texts.

  • text-left: left justify the texts.
  • text-center: center justify the texts.
  • text-right: right justify the texts.

Pagination:

Pagination might be the first thing you may look at the page where you need to display a large number of record items from a database.

You can use the class pagination to create the pagination component ready for your page. Use UL (Unordered list) and apply the pagination class to it. Add LI (list items), it will create the pagination component easily.

Alerts:

Suppose you are offering certain operations like add, update or delete on a page. You may want to alert your user about the success or failure of the operation.

Bootstrap offers you more sophisticated alerts that help you serve a better experience to you users.

You may create an alert using the alert class easily. Here is how you should use it:

<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Progress bar:

Having a progress bar might be a good idea when you are offering Ajax-based solution like data searching, sorting or updating. It may give your users visual signal of operation completeness!

The progress and progress-bar classes combined will help you make the progress bar easily. Here is how you should use it:

<div class=”progress”>
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>

Scripts:

There is some dynamic component that you may need to add into your page to make it more intuitive or interactive.

Modal:

You might want to show a login page or an error message along with some actions on your page. Achieving this is not really hard, you can use the modal.

You may require jQuery.js and modal.js(if not using bootstrap.js that include every js components) to add the modal functionality to your website.

Here is the JS code to fire the modal in your page:

$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})

For more information on the modal, example and code documentation you can visit the official modal documentation.

Tooltip:

Do you have plenty of buttons on the page? Do you think it may confuse your visitors on which button has what action and when to use each of them?

You can eliminate that confusion with Tooltip. A tooltip is a small message appear on left/right/top/bottom of the element when hovered over it.

Here is how you can use it:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

Carousel:

Whether it’s the home page image slider or the project/product portfolio sliders. Bootstrap makes your job easy adding one such slider with a minimum amount of code.

It’s a bit complex component to get on the go. But having a closer look at it might make things clear and easy to digest.

You need to care about carousel, slide, carousel-inner, and item. The carousel class is responsible for creating the base carousel element on the page. It adds the required styling for the carousel.

The slide class suggests that the carousel we are creating will have number slides added to it. The carousel-inner class is used to set-up required architecture for inner sliding components.

For example and detailed architecture, you may consider visiting carousel official documentation.

Conclusion:

Learning the web designing might be tough, not using the uniform UI framework. Bootstrap is fairly easy to learn and use. It gives us the developers the power of creating new page or add set of elements on page while keeping the overall designing language intact! Worth investing some of your time it.

Post by Darshan Joshi

Darshan has a deep interest in Web technologies. He loves to empower MSME with his custom web development services. He is a firm believer of a true end to end solution. He offers a solution from website design, content creation, website development, website deployment, digital marketing, to brand building.

Leave a Reply

Your email address will not be published. Required fields are marked *