Well header responsive - GCWeb theme

Responsive well header section it to support use case for promotional page header or panel section header.

Behaviour

Readjust the width of the well header based on the view port. The following is the container size

Large and over:

50%

Small and over:

75%

Default:

100%

CSS

.header-rwd

Represent the header responsive container area. It must be accompagnied by the CSS class .well

Demos

There is some additional example by using some provisional feature

In a section.panel

<section class="panel panel-primary">
	<header class="panel-heading">
		<div class="well header-rwd text-primary">
			<h4 class="brdr-bttm">Heading</h4>
			<p>Secondary title</p>
		</div>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
		<p>Second paragraph of a panel content</p>
	</div>
</section>

Over an image

Heading

Secondary title

<div class="row">
	<div class="col-xs-12">
		<div>
			<img class="img-responsive full-width" src="https://wet-boew.github.io/v4.0-ci/demos/tabs/img/investinourfuture.jpg" alt="">
			<div class="well header-rwd pstn-tp-sm mrgn-tp-lg mrgn-bttm-md">
				<h4 class="mrgn-tp-md">Heading</h4>
				<p>Secondary title</p>
			</div>
		</div>
	</div>
</div>