I presume you expected and actual images are the wrong way around here?

@wilsonge Yes, you're right. Thank you! I've corrected the original post.

I looked into this issue and found the following points:

• the first problem is, that beez does not load bootstrap by default => solution: add com_media to the template parameters
• then we see, that we cannot see anything: beez supports bootstrap only in the index.php and not in the component.php => add the code to the component.php

$app            = JFactory::getApplication();
$templateparams = $app->getTemplate(true)->params;
$bootstrap      = explode(',', $templateparams->get('bootstrap'));
$jinput         = JFactory::getApplication()->input;
$option         = $jinput->get('option', '', 'cmd');

if (in_array($option, $bootstrap))
{
    JHtml::_('bootstrap.framework');

    // Load optional rtl Bootstrap css and Bootstrap bugfixes
    JHtml::_('bootstrap.loadCss', true, $this->direction);
}

• now we have styled boxes without images. Problem: the default bootstrap (from the media folder) does not know icon-folder-2 => we have to rename all icon-folder-2 to icon-folder-close
• now the li-elements are not in one line => add pull-left to the li elements or add ".thumbnails > li" to the beez css
• last but not least we have to style the link hover color

Other solution: put every style property to the beez template css (like icon, etc.) to use it without any bootstrap stuff

As much as I see in the german forums, it would be a good idea to remove the beez template completely fom the core - there are too many questions and problems around it.

I think it'd be good to find a solution to this.

It means that using the media manager when front-end-editing is dependent on the template having the required bootstrap bits. This is a use case that many template developers do not test against I think.

Perhaps com_media, when loaded via an iFrame, should have all the styles it needs loaded from within the component.

So, I'm thinking, perhaps this is less of an issue with beez, and more of an issue in that com_media does not include all the styles that it needs to function nicely.

Just some thoughts, I'll have a ponder and see if I can put together some code for this.

Just a hint:
Remove from administrator/components/com_media/views/images/tmpl/default.php

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#browse_tab" data-toggle="tab"><?php echo JText::_('COM_MEDIA_BROWSE_FILES') ?></a></li>
        <li><a href="#upload_tab" data-toggle="tab"><?php echo JText::_('COM_MEDIA_UPLOAD') ?></a></li>
    </ul>

    <div class="tab-content">

as well as lines 147-148 and lines 162-163. This will bring back the old (no tabs view ) and therefore should be easier.
That view will be used only by the mootools part of the field, bootstrap should use the new one, tried it with Hathor...

@Harmageddon @AndyGaskell @bembelimen try #8373 oops wrong pr

Thanks @dgt41 for the pointers, I'll do some reading of that code and ticket.
I need to have a bit more of a dig into it here, it seems like it might be an issue cause locally related to the template CSS not being loaded into the iFrame.
My thinking, initially, was to add the required css to /media/media/css/popup-imagemanager.css but that may not be ideal, I'll dig into it further.

@AndyGaskell another hint: that modal contains two iframes (the first one is the view images and inside that one there is another iframe from the view medialist (where the icons are). So the solution must cover both views...

Thank you for submitting this issue/pull request. The media manager is currently being completely rewritten and I have notified the development team about this issue for their consideration. I am closing this here at this time.