Not all images in a Bootstrap site need to be responsive. In this video, learn how to insert fixed-size SVG icons and control their size with CSS.
- [Instructor] Most of the images in the Bootstrap site…are likely to need to be responsive.…In other words, to change size depending on the viewport.…But some images, such as icons, need to be a fixed size.…I want to add icons to each column in the highlight section…to give the page more visual interest.…I've got the icons in the images folder…in this sub folder called svg.…And all of the icons have file names…that end the some way, underscore icon.svg.…
The only one that doesn't end like that…is this one halfdome.svg.…That was used as the icon here in the Navbar.…And having the icons all end the some way,…will make them easier to style with CSS.…Now the Insert panel, the Bootstrap Components section,…doesn't have an option for a fixed size image.…No real surprise there, because we just need to use…a plain HTML image tag.…
But before you can Insert the image,…you need to select the elements you want it…to be adjacent to.…I'm going to put the first icon above this…Spectacular Scenery heading.…So, select that in Live view.…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 42m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.