Bootstrap/scss/_media.scss

.media {
  display: flex;
}
.media-body {
  flex: 1;
}
.media-middle {
  align-self: center;
}
.media-bottom {
  align-self: flex-end;
}


//
// Images/elements as the media anchor
//

.media-object {
  display: block;

  // Fix collapse in webkit from max-width: 100% and display: table-cell.
  &.img-thumbnail {
    max-width: none;
  }
}


//
// Alignment
//

.media-right {
  padding-left: $media-alignment-padding-x;
}

.media-left {
  padding-right: $media-alignment-padding-x;
}


//
// Headings
//

.media-heading {
  margin-top: 0;
  margin-bottom: $media-heading-margin-bottom;
}


//
// Media list variation
//

.media-list {
  padding-left: 0;
  list-style: none;
}
Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom 2016-12-22 05:26:17 +01:00			`.media {`
			`display: flex;`
			`}`
			`.media-body {`
			`flex: 1;`
			`}`
			`.media-middle {`
			`align-self: center;`
			`}`
			`.media-bottom {`
			`align-self: flex-end;`
Fix up margins and unnest code 2014-10-26 02:13:35 +01:00			`}`
Added Medias code and documentation Fix for Issue #1711 Added media.less and edited bootstrap.less and responsive.less to manage media components. Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos Signed-off-by: Giuliano Velli <wpbrains@giusi.org> 2012-04-20 17:54:51 +02:00
Fixes #15140: Restore more missing .media styles from shipping #14801 2014-11-30 06:36:57 +01:00
flex variation for media 2015-04-27 10:50:38 +02:00			`//`
			`// Images/elements as the media anchor`
			`//`
Fixes #14990: Media bodies take up full width Signed-off-by: Beatrice Peng <bpeng@pivotal.io> 2014-12-17 17:19:06 +01:00
Fixes #15140: Restore more missing .media styles from shipping #14801 2014-11-30 06:36:57 +01:00			`.media-object {`
			`display: block;`
clean out comments that aren't all that helpful 2015-08-18 03:33:34 +02:00
Merge branch 'master' into v4 2015-06-19 08:56:43 +02:00			`// Fix collapse in webkit from max-width: 100% and display: table-cell.`
			`&.img-thumbnail {`
			`max-width: none;`
			`}`
Fixes #15140: Restore more missing .media styles from shipping #14801 2014-11-30 06:36:57 +01:00			`}`

flex variation for media 2015-04-27 10:50:38 +02:00
			`//`
			`// Alignment`
			`//`

remove utils from media alignment 2015-05-30 01:05:42 +02:00			`.media-right {`
Add variables for media object margins and padding [skip sauce] [skip validator] 2016-01-09 23:34:59 +01:00			`padding-left: $media-alignment-padding-x;`
Fix up margins and unnest code 2014-10-26 02:13:35 +01:00			`}`
overhaul the docs and css to merge into 2.1.2 since this was against master 2012-09-18 03:15:39 +02:00
remove utils from media alignment 2015-05-30 01:05:42 +02:00			`.media-left {`
Add variables for media object margins and padding [skip sauce] [skip validator] 2016-01-09 23:34:59 +01:00			`padding-right: $media-alignment-padding-x;`
Fix up margins and unnest code 2014-10-26 02:13:35 +01:00			`}`
Fixes #14799: Add vertical alignment of image in media component Signed-off-by: Jenn Dodd <jedodd@pivotal.io> 2014-10-14 23:09:57 +02:00
Fix up margins and unnest code 2014-10-26 02:13:35 +01:00
flex variation for media 2015-04-27 10:50:38 +02:00			`//`
			`// Headings`
			`//`
overhaul the docs and css to merge into 2.1.2 since this was against master 2012-09-18 03:15:39 +02:00
Fixes #14799: Add vertical alignment of image in media component Signed-off-by: Jenn Dodd <jedodd@pivotal.io> 2014-10-14 23:09:57 +02:00			`.media-heading {`
Fix up margins and unnest code 2014-10-26 02:13:35 +01:00			`margin-top: 0;`
Add variables for media object margins and padding [skip sauce] [skip validator] 2016-01-09 23:34:59 +01:00			`margin-bottom: $media-heading-margin-bottom;`
Fixes #14799: Add vertical alignment of image in media component Signed-off-by: Jenn Dodd <jedodd@pivotal.io> 2014-10-14 23:09:57 +02:00			`}`
overhaul the docs and css to merge into 2.1.2 since this was against master 2012-09-18 03:15:39 +02:00
flex variation for media 2015-04-27 10:50:38 +02:00
			`//`
overhaul the docs and css to merge into 2.1.2 since this was against master 2012-09-18 03:15:39 +02:00			`// Media list variation`
Fix up margins and unnest code 2014-10-26 02:13:35 +01:00			`//`
flex variation for media 2015-04-27 10:50:38 +02:00
overhaul the docs and css to merge into 2.1.2 since this was against master 2012-09-18 03:15:39 +02:00			`.media-list {`
reset left padding for .media-list, .pagination and .pager 2013-06-29 22:06:14 +02:00			`padding-left: 0;`
overhaul the docs and css to merge into 2.1.2 since this was against master 2012-09-18 03:15:39 +02:00			`list-style: none;`
Modified the file to conform to bootstrap standards and fix an IE7 css selector issue Signed-off-by: Giuliano Velli <giuliano@giusi.org> 2012-04-24 17:23:14 +02:00			`}`