Posts Tagged: Bootstrap
Does HubSpot CMS use Bootstrap?
HubSpot does not use Bootstrap as-is for their CMS and grid system. Instead, its default 12 column grid system and class naming is based on the Bootstrap 2 grid system, but the actual code is different. Here is what the default HubSpot layout.css file looks like. HubSpot 2 column grid (Bootstrap 2) div structure example
1 2 3 4 5 6 7 8 | <div class="row-fluid "> <div class="span6"> Column 1 content </div> <div class="span6"> Column 2 content </div> </div> |
So can I… Read more »
Category: Common Questions
What’s New in Bootstrap 4.4.0 and 4.4.1
At the end of November 2019, the Bootstrap team released a new version which contained some very notable updates. This post will highlight some of these updates and how they can help you in your projects. New Responsive Containers You can now create responsive containers using one of these classes .container-(sm, md, lg, xl) This… Read more »
Category: Newsletter
How To Center a div Horizontally in Bootstrap 4
It is very common in web design layouts to horizontally center a column in a row or container. But how do you do that using Bootstrap classes? Below are some different ways you can achieve this effect. Option 1 – Bootstrap Offset You can use Bootstrap offset classes to horizontally shift columns left or right…. Read more »
Category: Common Questions
How to Add a Featured Tag with Text Over an Image
In this tutorial I will show you how to place a featured tag over an image using CSS3 ::before pseudo elements. A common use case for this is eCommerce where you might want to visually show a product is featured, on sale, or out of stock. Since your products are displayed dynamically using a database,… Read more »
Category: Tutorials
What does Bootstrap 4 data-toggle=”dropdown” do?
Have you ever noticed data-toggle=”dropdown” in Bootstrap 4 dropdown code sections and wondered what this does? Bootstrap includes a CSS stylesheet and JS full of functions to add click behaviors and interactivity. Instead of having you write custom javascript to initialize these functions, it searches the page for any elements that contain certain data attributes…. Read more »
Category: Common Questions
Should I use my own CSS or Bootstrap?
Does your website or application have any of the following? Paragraphs, tables, buttons, lists, tabs, headings, responsive embeds, images, responsive breakpoints, etc. The main benefit of using Bootstrap is it saves you time writing common CSS styles most projects have. It is a toolkit you know is fully documented in case you need to add… Read more »
Category: Common Questions
What Are the Bootstrap 4 Text Font Sizes and How Do You Change Them?
Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change the body font size all styles will be increased/decreased automatically. Rem stands for “root em” because it calculates the size based on the size of the root of the document or body tag. So Bootstrap’s global default… Read more »
Category: Common Questions
What are the integrity and crossorigin attributes and why are they necessary?
In the code snippet below, you will see how Bootstrap uses a CDN to deliver their minified scripts and styles. But what is that long string of random characters after integrity=?
1 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> |
With this technology, developers can benefit from the performance gains of using Content Delivery Networks (CDNs) without having to fear that a third-party… Read more »
Category: Common Questions
Bootstrap 4 Img Responsive Class Example
In Bootstrap 3 you would use the class .img-responsive but in Bootstrap 4 this class name has been renamed to .img-fluid View on codepen How to create a responsive image in Bootstrap 4 .img-fluid
1 | <img src="https://dummyimage.com/1200x400/000/fff" alt="responsive image" class="img-fluid"> |
Category: Common Questions
How Do I Make an Image Responsive in Bootstrap 4?
.img-fluid
1 | <img src="https://dummyimage.com/600x400/000/fff" alt="placeholder image" class="img-fluid" /> |
In Bootstrap 4 you would use the .img-fluid class on all images you would like to be responsive. This class tells the browser not to expand the image larger than its original size using a max-width. And it also tells it to scale down the image if the browser window gets narrower than… Read more »
Category: Common Questions