Join Jen Kramer for an in-depth discussion in this video Creating a custom button with mixins, part of Bootstrap 3: Customizing with LESS.
…So now that you have a sense of how all of those various files work, all the way from…the HTML down to the various button files, and the variable files, and…the mixin files, and so forth, let's leverage…those mixins to make some new kinds of…buttons that we can use right here on…the homepage for these three Read more options.…And so, what we're going to do to make this happen is…if you go into Sublime Text, go on ahead and open up custom.less.…And just scroll on down to, the end of the document.…
And I'm going to go ahead and put in a comment…that says, buttons with mixins, so we know what we're doing.…And then all I'm going to need to do is the following.…I'm going to add a .btn-secondary, will be the name of my class.…Why?…Because I'm following those Bootstrap conventions.…I could call this a class of George…if I wanted to, but it's not really self-documenting.…I'd rather follow Bootstraps conventions that they have…already laid out for changing the colors of buttons.…
Since I'm going to make this button the secondary color that I…
Author
Released
7/8/2014- Setting up your working environment for Bootstrap and LESS
- Understanding the LESS file structure
- Creating and manipulating LESS variables
- Working with LESS mixins
- Creating custom styles using mixins and variables
Skill Level Intermediate
Duration
Views
Related Courses
-
CSS with LESS and Sass
with Joe Marini1h 57m Intermediate -
Bootstrap 3: Advanced Web Development
with Ray Villalobos3h 28m Intermediate
-
Introduction
-
Welcome49s
-
Using the exercise files1m 35s
-
What are Bootstrap and LESS?3m 50s
-
-
1. Getting Started
-
Download and install jQuery2m 49s
-
2. Working with LESS
-
Compiling LESS with Prepros3m 26s
-
3. Simple LESS Customizations
-
Styling the JumboTron9m 21s
-
Styling the nav bar8m 24s
-
Solution: Styling the panels4m 21s
-
4. Advanced LESS Customizations
-
Understanding mixins5m 25s
-
Styling the tabs7m 54s
-
-
Conclusion
-
Next steps46s
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Creating a custom button with mixins