Creating Circle images with bootstrap 4

by | Feb 13, 2018 | Bootstrap, Web Design

Creating Circle images with bootstrap 4

Creating Circle images with bootstrap 4. In this video we show you how to create some great-looking Circle images with bootstrap 4. We are going to be using the free Brackets text editor, and to make things easier we’re going to use an extension cold RCH bootstrap Snippets. This extension allows us to insert complex HTML code with just a few keystrokes using short codes. These short codes make coating an HTML page a very quick process.

Creating Circle images

Bootstrap 4 Alpha has just been released and it is absolutely amazing. It has some fantastic new features and elements but make designing the web page is an absolute pleasure.

For our project here we are designing a simple restaurant type page from scratch. For anyone that has been using bootstrap 3 you will notice quite a few changes with bootstrap 4. Many of the old bootstrap 3 classes are now gone, and bootstrap 4 has added many new ones including some awesome padding and margin classes for adding space on the fly.

Here are a few of the new features:

Print styles and utility classes have been updated. We’ve improved how printed pages are rendered to ensure pages are reasonably sized instead of rendering them as mobile devices. Print display utilities also include a whole slew of new display values to match our standard display utilities.

Additive border utilities have been added (e.g., .border-top) and default to a solid 1px light gray border. Now it’s easier to quickly add all borders or a subset of borders to your components.

Our $spacers and $sizes Sass maps have been updated to allow more customization the same way our color maps work. You can now add, remove, or replace all your key-value pairs consistently across our CSS. Head to our Theming docs for more information and examples.

Added documentation to our Theming docs for using our provided CSS variables for those are living on the edge and don’t want to use Sass.

Added responsive .order-0 and .order-last classes for more control over the flexbox grid.

And many more….

In the video above we have created some simple square images in Photoshop. We then go ahead and call them in to our HTML using a short code in our brackets text editor that will convert them to circle images. This takes no time at all and the results speak for themselves.

Creating Circle images

Creating Circle images

If you do any kind of coding I would recommend that you check out free brackets code editor not only is it free but is it is packed with great features and extensions that make coding a real pleasure.

Download the free brackets text editor from here:

Subscribe To Our YouTube Channel

4.5 million views on youtube

Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This