Search

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

Heading

Secondary title

Panel content

Second paragraph of a panel content

<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>
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: