Responsive design in Sitecore using bootstrap

Pranay
Mar 13, 2020  ·  7073 views
sitecore sitecore-mvc Bootstrap Responsive-design 

Responsiveness has become the must have feature of any websie now a days. As Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects, I am writing this example on responsive design in sitecore mvc using bootstrap framework.

Need for responsive design in Sitecore

Sitecore by default provides support for adaptive responsive but stilll people find a need to go for responsive design in sitecore. Go through this link for information on ‘Responsive vs adaptive design in Sitecore mvc – which is better?‘

What you need to know?

To understand/implement this example, you need to know how bootstrap can be used in a simple website to achieve responsiveness. Bootstrap is quite easy and has a very good documentation. So if you are new to bootstrap, going through the basics here will help you a lot.

Bootstrap in sitecore mvc

Here, we shall consider a basic bootstrap template having a header, footer and content and integrate this in sitecore mvc. Below is the Html source of the sample bootstrap template. You can also download the same from official boostrap site here.

Sample bootstrap template html source:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="sticky-footer-navbar.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Before going to the sitecore, lets first create a sitecore mvc layout (OneColumnLayout.cshtml file)out of this html code as shown below with 3 placeholders – phHeader, phContent, phFooter.

OneColumnLayout.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="sticky-footer-navbar.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
    @Html.Sitecore().Placeholder("phHeader")
    </nav>

    <!-- Begin page content -->
    <div class="container">
     	@Html.Sitecore().Placeholder("phContent")
    </div>

    <footer class="footer">
      	@Html.Sitecore().Placeholder("phFooter")
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

  • Now create a sitecore mvc layout called ‘OneColumnLayout’ from the above ‘.cshtml’ file.

  • Create view renderings in sitecore ‘HeaderRendering’, ‘FooterRendering’, ‘ContentRendering’ as shown below. (Each rendering will have the code which we have replaced it with the placeholders in the layout file.)

HeaderRendering:

Type: View rendering

Header.cshtml:

 <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

ContentRendering:

Type: View rendering

Content.cshtml:

 <div class="page-header">
    <h1>Sticky footer with fixed navbar</h1>
  </div>
  <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
  <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>

FooterRendering:

Type: View rendering

Footer.cshtml:

<div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>

  • From sitecore content editor, create a content item say ‘Home’ and set its layout as the ‘OneColumnLayout’ –the one what we have created above.

  • Set the presentation details of the ‘home’ item with the view renderings(HeaderRendering, FooterRendering, ContentRendering) along with the placeholders.

Save it and open home page from the browser, similar output will be displayed as in this link should be coming. So we have sucessfully integrated the bootstrap template into a simple sitecore page. We can also use advanced boostrap components listed here in sitecore mvc.

Any suggestions, corrections or queries please let me know.!!

AUTHOR

Pranay

A Software Engineer by profession, a part time blogger and an enthusiast programmer. You can find more about me here.

RELATED:

Integrating Visual Studio solution with Sitecore MVC - basic

Serialization and deserialization in Sitecore

Populating Sitecore mvc model in .net mvc view

Reading XML/JSON from Media library in Sitecore MVC


Post a comment




Thank you! You are now subscribed.

RELATED:

Integrating Visual Studio solution with Sitecore MVC - basic

Serialization and deserialization in Sitecore

Populating Sitecore mvc model in .net mvc view

Reading XML/JSON from Media library in Sitecore MVC

Sign up for our newsletter

Subscribe to receive updates on our latest posts.

Thank you! You are now subscribed.