header issue using bootstrap

Last Reply 17 days ago By dharmendr

Posted 17 days ago

I am designing the header using bootstrap.

This is what i wanted to design.

https://ibb.co/mYn8zx

 

what i tried is:MasterPage

 

 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="Styles/main.css" type="text/css" rel="Stylesheet" />

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style>
        /*.navbar-brand {
  display: inline-block;
  float: none;
  font-size: 18px;
  height: 100%;
  padding: 0;
  vertical-align: middle;
}*/
    </style>
</head>
<body>
  <%--<div class="divHdr">
      <div style="float:left;"><a href="Default.aspx"><asp:Image ID="imgLogo" 
              runat="server" Height="90" Width="250"/></a></div>  
        <div style="float:left;padding-left:300px;padding-top:3px;"><asp:Image ID="imgTop" 
                ImageUrl="~/images/top_banner/Buildexpo-ban.jpg" runat="server" Height="80" 
                Width="400"/></div>
        <div class="clearBt"></div>
    </div>--%>

<%--<div class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
          <div class="navbar-header">
    <div style="float:left;"><a href="Default.aspx"><asp:Image ID="imgLogo" class="img-responsive"
              runat="server" Height="90" Width="250"/></a></div>  
        <div style="float:left;padding-left:300px;padding-top:3px;"><asp:Image ID="imgTop" class="img-responsive"
                ImageUrl="~/images/top_banner/Buildexpo-ban.jpg" runat="server" Height="80" 
                Width="400"/></div>
        <div class="clearBt"></div>
              </div>
          </div></nav>
</div>--%>

    <div class="container-fluid">
    <nav class="navbar navbar-default">
  <%--<div class="container">
     --%>
      <div class="row">
        <div class="col-sm-4">
          <div class="navbar-header">
           
                <%--<img alt="Brand" id="brand2" src="http://www.kratosuk.com/wp-content/uploads/2013/07/joomla-logo.png" class="img img-responsive"/>--%>
                <a href="Default.aspx"><asp:Image ID="imgLogo" 
              runat="server" CssClass="img-responsive" Height="90" Width="250"/></a></div> 
            </div>
         
            <div class="col-xs-6">

            <ul class="nav navbar-nav navbar-right">
               <%-- <img alt="Brand" id="brand1" class="img img-responsive" src="http://www.kratosuk.com/wp-content/uploads/2013/07/drupal-logo.png"/>--%>
                <asp:Image ID="imgTop" 
                ImageUrl="~/images/top_banner/19.18.21-TOP%20Kenya%20BUILD.jpg" runat="server" CssClass="img-responsive" Height="80" 
                Width="400"/>
             </ul>


            </div>
            <div class="clearfix"></div>
          </div>

       




         
     <%-- </div>
    --%>    

    
      
</nav>
        </div>


</body>
</html>

 

.container-fluid
{
	width:100%;
	background-color:#fcfdfd;
	margin-top:5px;
	margin-bottom:10px;
}
.navbar navbar-default
{
    margin:auto;width:960px;height:107px;padding-top:7px;
}
.clearfix
{
    clear:both;
}

Default.aspx

 

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

I am not getting the header design properly.Any help will be highly appreciated.i am using bootstrap for the first time.

You are viewing reply posted by: dharmendr 17 days ago.
Posted 17 days ago

Hi chetan,

With this much I cannot check. I have tried but it is not complete.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html