locked
Free bootstrap page tamplate RRS feed

  • Question

  • User1444011213 posted

    Hi,

    Is there a web site where I can find a free bootstrap web template that I can use with new web page I am trying to build?

    Masters page + other pages?

    Thanks for anwsering

    Friday, December 27, 2019 5:31 AM

All replies

  • User1535942433 posted

    Hi westgatezagrb,

    As far as I know,there aren't existing a web site  like that includes about free bootstrap templates with master pages.
    I suggest you could try to creat  master pages by yourself and add bootstrap  templates for free.If you couldn't do it,I creat a demo for you.

    More details,you could refer to below codes:

    Master page:

    <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <script src="Scripts/jquery-3.0.0.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/full-width-pics.css" rel="stylesheet" />
    
    <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>

    Content page:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site2.Master" AutoEventWireup="true" CodeBehind="WebForm40.aspx.cs" Inherits="Demo.WebForm40" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
          <a class="navbar-brand" href="#">Start Bootstrap</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    
      <!-- Header - set the background image for the header in the line below -->
      <header class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1076');">
        <img class="img-fluid d-block mx-auto" src="http://placehold.it/200x200&text=Logo" alt="">
      </header>
    
      <!-- Content section -->
      <section class="py-5">
        <div class="container">
          <h1>Section Heading</h1>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
        </div>
      </section>
    
      <!-- Image Section - set the background image for the header in the line below -->
      <section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
        <!-- Put anything you want here! There is just a spacer below for demo purposes! -->
        <div style="height: 200px;"></div>
      </section>
    
      <!-- Content section -->
      <section class="py-5">
        <div class="container">
          <h1>Section Heading</h1>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
        </div>
      </section>
    
      <!-- Footer -->
      <footer class="py-5 bg-dark">
        <div class="container">
          <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
        </div>
        <!-- /.container -->
      </footer>
    
      <!-- Bootstrap core JavaScript -->
      <script src="vendor/jquery/jquery.min.js"></script>
      <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    </asp:Content>

    Result:

    More details,you could refer to these articles:
    free Bootstrap template:

    https://startbootstrap.com/templates/

    Master page:

    http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/aspnet/aspnet_masterpages.asp.html

    Best regards,

    Yijing Sun

    Monday, December 30, 2019 8:57 AM