Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
	<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
			<!-- Intégration du bouton toggle en premier-->
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="navbar-brand">
						<a href="#"><img src="http://www.webasun.com/wp-content/uploads/2014/06/wordpress_logo.png" alt="logo wordpress par ce que j'ai pas eu d'imagination sur ce coup là..." /></a>								
				</div> <!-- fin nav bar brand-->
				
			</div> <!-- fin nav bar header-->

			<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav" id="collapse-1">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Produit</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
			</div> <!-- fin navbar collapse-->
					<p class="navbar-text">"L'expérience est le mots que l'on donne à nos erreurs..." O. Wilde</p>

			<p class="navbar-text navbar-right"><a href="#" class="navbar-link">Se connecter</a></p>
			
		</div> <!-- fin container-->
	</nav>
	
	<section>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eius in incidunt dignissimos nobis corrupti quis, autem alias voluptas doloribus iste eum deleniti, ratione itaque voluptate error dolore asperiores accusamus.</div>
	<div>A ducimus, accusantium asperiores ut repudiandae incidunt quaerat voluptas, vero corrupti dignissimos mollitia. Accusantium doloremque pariatur similique sint libero adipisci accusamus magni! Omnis magni voluptas laborum molestias? A inventore, laborum.</div>
	<div>Laudantium iure eum voluptates non sunt esse, ducimus fugiat dolorem ipsum quo voluptatem omnis nemo dolor ut minus dignissimos optio ipsam doloremque nulla libero, tempora cumque, sapiente aliquid impedit. Vel.</div>
	<div>Laborum commodi temporibus sequi optio. Quis sunt sint perferendis quas facere, dolorem fuga debitis ratione minus earum ipsum ipsa laboriosam fugiat mollitia eligendi rem magnam impedit illum nobis sit beatae.</div>
	<div>Voluptatum autem distinctio officia debitis minima eum soluta, animi recusandae, incidunt adipisci aperiam accusantium nisi, deserunt iste enim. Libero reprehenderit, accusamus neque necessitatibus praesentium ut minus fugiat dolor dicta maxime!</div>
	<div>Illo quod laborum vitae soluta ipsum in vel quo, officiis veritatis. Veritatis quas ducimus cupiditate aspernatur reprehenderit tenetur, aliquid pariatur, officia perferendis ab, consequatur earum quam minus odio adipisci saepe.</div>
	<div>Deleniti voluptas culpa, recusandae. Illum maiores optio alias a in expedita, amet eaque aspernatur blanditiis sunt perferendis nisi non similique sequi aliquid porro cupiditate quidem! Saepe, id. Dignissimos, fugiat, assumenda.</div>
	<div>Repellat quibusdam repellendus quod at consequatur cum asperiores atque aliquid, esse consequuntur est laboriosam delectus corrupti rerum sapiente ullam, cumque quas illum unde labore in nihil maiores enim. Explicabo, iste.</div>
	<div>Repellendus expedita voluptas voluptates, veniam explicabo, neque ex tempore asperiores corporis excepturi maiores sint libero dolorem rerum nemo fuga aspernatur magnam, provident iusto porro architecto odio. Porro, sed maxime aut.</div>
	<div>Beatae architecto nisi blanditiis nam porro excepturi. Culpa doloribus fugiat est soluta, ipsa quam ex, at ipsam, quos in incidunt totam. Dolores esse quas nihil dignissimos modi iste doloremque obcaecati.</div>
	<div>Fugiat impedit, harum, temporibus dignissimos quibusdam blanditiis consectetur unde maiores eaque nisi similique aliquam provident rem facilis? Saepe accusantium doloremque, expedita praesentium at quo autem sit ratione maiores aliquid non.</div>
	<div>Ex unde nobis quaerat blanditiis, assumenda, maiores illo ad vel. Porro quisquam itaque, similique inventore laudantium consequatur, laboriosam dolor corporis magni, temporibus libero ipsum tempora id ipsam eligendi obcaecati numquam?</div>
	<div>Harum blanditiis ducimus aliquam nesciunt fugiat, incidunt recusandae perferendis doloremque animi excepturi! Quaerat repellendus, tempora. Aliquid hic provident quis, earum numquam dolores cumque, temporibus, commodi perferendis est minima alias odit.</div>
	<div>Et eos voluptatibus ad incidunt, magnam eius! Nisi, accusantium, distinctio incidunt alias vel dolore deleniti quae enim optio saepe, debitis nihil adipisci magnam dolorem commodi cumque dolorum illum tenetur repellendus?</div>
	<div>Iste quisquam numquam in amet, unde expedita consequatur id. Quos quo modi similique neque nostrum cum in nobis mollitia possimus porro atque, ipsum, id, sit veniam eos inventore deleniti voluptatum.</div>
	<div>Facilis quas, inventore dolor error modi pariatur recusandae aliquam! Aliquam sed odit quod! Vitae earum maiores voluptate commodi laudantium optio incidunt quos. Quo, temporibus. Beatae, tempore minima iusto pariatur distinctio.</div>
	<div>Perferendis iusto ducimus similique magni, voluptates eius dicta quia! Delectus labore facere tempora tenetur voluptate repellendus suscipit nulla ipsum atque, alias dolore officiis rerum voluptatum ullam totam, cumque, ad eum.</div>
	<div>Consequuntur, qui ducimus! Nostrum veritatis, rerum tempora dolore necessitatibus repellendus, ipsam, aspernatur eveniet fuga incidunt beatae! Voluptates, velit fugiat ducimus, facere ab inventore distinctio ipsam mollitia magnam, fugit reprehenderit nostrum.</div>
	<div>Magnam, consectetur autem perferendis voluptatum aliquam voluptatem qui delectus fuga quia sequi culpa recusandae quod quibusdam saepe, placeat in, repudiandae ab accusantium suscipit numquam doloribus libero velit! Nesciunt, fuga, non.</div>
	<div>Assumenda natus possimus tenetur iusto veniam obcaecati laudantium illum, inventore quibusdam saepe deserunt quo, nostrum voluptas omnis doloribus totam corrupti sit. Vel voluptatibus aperiam possimus aspernatur explicabo, consequuntur aliquam natus.</div>
	</section>
	
	
	<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
              
            
!

CSS

              
                body{
	padding-top:120px;
}

img{
	width:10%;
}

/* Permet de retirer le soulignage du lien au survol*/
/*.navbar-link:hover{
	text-decoration:none;
}*/ 
              
            
!

JS

              
                
              
            
!
999px

Console