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.
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.
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: http://brackets.io/
