We Keep Coding

mr-auto class of bootstrap not working as excepted?

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav **mr-auto**">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Terms</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server">View Books</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server">User Login</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server">Sign Up</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server">Logout</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server">Hello user</asp:LinkButton>
</li>
</ul>
</div>
See the navigation there is some margin left between the logo and the buttons
I imported this code form bootstrap but the first is not totally aligning left but the second is rightly aligned to the right hand sidesee I have inspected this but it looks fine to me

According to the documentation of Flex of Bootstrap 4:
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
To enable this behavior you need to add one of the below d-flex classes to the container element, which in your case is the root div element:
<div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
Valid options are:
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

How to create layout using asp.net

how to create layout with header, main content and footer in separately files?
In Site.Master there is a Menu, main content and footer together and I want to separate them.
I've created new Web Form with Master Page (Menu.aspx):
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="WebApplication2.Menu" %>
<asp:Content ID="Content1" ContentPlaceHolderID="menu" runat="server">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</asp:Content>
and I'm trying to include it in Site.Master:
<form runat="server">
<!-- Menu -->
<asp:ContentPlaceHolder ID="menu" runat="server">
</asp:ContentPlaceHolder>
<!-- Main content -->
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
but it won't render. What's wrong?

I think that the MasterPageFile in your Menu.ascx shouldn't be there. The menu is like a partial view, it shouldn't have masterpage. However, I would chose different approach.
Menu
<%# Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Menu.ascx.cs" Inherits="WebApplication2.Menu" %>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
What I've done on the Menu page: I removed the MasterPageFile attribute of the menu, because the menu isn't a whole page but a part of one (like partial view in MVC). Also, removed the <asp:Content> tag because you don't want the menu to be rendered in the main of your Site.Master.
Site.Master
Include this line on the top of the Site.Master
<%# Register TagPrefix="Menu" TagName="Menu" Src="the path to your Menu.ascx" %>
Change the value of the Src attribute with the path to your Menu.Ascx page.
Now you can render your Menu.ascx page wherever you want in your Site.Master like that:
<Menu:Menu runat="server" />
I am not 100% sure it will work because I haven't tested it. If something's wrong comment below. I will help you.

Add items to Bootstrap Dropdown from Code Behind

I have a dropdown from boostrap such as this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-bell-o"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
</ul>
</div>
I'd like to add list items to this boostrap dropdown menu from my C# code behind. I'm adding items through a String foreach Loop. How do I access the dropdown id, since its not displayed in the code behind because it requires ASP controls?

You will need a repeater.
Repeater1.DataSource = yourdatasource
Repeater1.Databind()
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate><Ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></HeaderTemplate>
<ItemTemplate>
<li role="presentation">
<a role="menuitem" href="#"> <%# Eval("yourfieldfromcodebhind here") %> </a>
</li>
</ItemTemplate>
</asp:Repeater>

Dynamically generated list

Could anyone give me an idee on how could I generate dynamically this piece od code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" runat="server">
<span class="caret"></span></button>
<ul class="dropdown-menu" id="testingPurposes">
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 1</span>
<asp:Image ID="Image1" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 2 </span>
<asp:Image ID="Image2" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
</ul>
</div>
The main idea of this code is to have some kind of dropdown list looking control that would have a span with text, and an image on each row.
This is basicly how my control shoud look when it's clicked:
Text1 img1
Text2 img2
If a user clicks TextN i get an event for that click, and i can update the page based on selected item.
If a user clicks imgN then TextN and imgN would disappear from the list.

Topbar in Foundation js not working on small screens in an asp.net application

I cannot get the topbar to work on small screens (www.mco.ntx-designs.com is where you can see). When you press the menu icon, nothing happens. I know that JQuery is loading and I mut presume that the foundation.topbar.js is loading as well but I have racked my brain and cannot figure this out. Here's my code:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MCO.Master.cs" Inherits="mco.SiteMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head runat="server">
<title></title>
<link href="~/Styles/mco.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/foundation.css" rel="Stylesheet" type="text/css" />
<link href="~/Styles/foundation.min.css" rel="Stylesheet" type="text/css" />
<link href="~/Styles/normalize.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/vendor/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/vendor/modernizr.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!--<script type="text/javascript">
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
} else {
alert("jQuery library is not found!");
}
</script>-->
<form runat="server">
<script src="~/Scripts/foundation.js" type="text/javascript"></script>
<script src="~/Scripts/foundation/foundation.topbar.js" type="text/javascript"></script>
<Header class="row" id="masterpageHeader">
<div class="large-12 medium-12 small-12" id="logoTop">
<asp:Image ImageUrl="~/images/mcoLogo.png" runat="server" AlternateText="Melissa Community Outreach Logo" />
</div>
<div class="sticky large-12 medium-12 small-12">
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
<ul class="title-area">
<li class="name">
<h1>Melissa Community Outreach</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li runat="server" id="mainHomeLink" class=""><asp:HyperLink ID="HyperLink13" runat="server" NavigateUrl="~/">Home</asp:HyperLink>
</li>
<li runat="server" id="mainGivingLink" class=""><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/giving/">Giving</asp:HyperLink>
</li>
<li runat="server" id="mainVolunteeringLink" class=""><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/volunteering/">Volunteering</asp:HyperLink>
</li>
<li runat="server" id="mainHoursLink" class=""><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/hours/">Hours</asp:HyperLink>
</li>
<li runat="server" id="mainLocationLink" class=""><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="~/location/">Location</asp:HyperLink>
</li>
<li runat="server" id="mainAboutLink" class="has-dropdown">
<asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="~/about/">About</asp:HyperLink>
<ul class="dropdown">
<li class="active"><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/mission-statement/">Mission Statement</asp:HyperLink>
</li>
<li><asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="~/directors/">Directors</asp:HyperLink>
</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>
Privacy Policy
</li>
</ul>
</section>
</nav>
</div>
</Header>
<main class="row">
<div class="large-12 medium-12 small-12">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</main>
<footer class="row" id="footerMain">
<div class="large-12 medium-12 small-12" id="newsletterFooter">
<div class="large-6 medium-6 small-12 left column">
<span class="largerText2">Stay up to date with what's happening with Melissa Community Outreach</span><br />
<span class="smallerText">Sign up to receive monthly emails with our latest information:</span>
</div>
<div class="large-6 medium-6 small-12 right"><asp:TextBox ID="emailSignupMain" runat="server" Width="400px" Height="53px" CssClass="textBoxWhite left" ></asp:TextBox><span class="button left">Email</span>
</div>
<div class="clear"> <br /></div>
</div>
<div class="large-12" id="linksFooter1">
<div class="large-5 medium-5 small-12 borderRightSmall text-center columns"><span class="text-center" id="aboutFooterHead">Melissa Community Outreach</span><br /><br />
We are a non-profit organization that helps out needy families in Melissa, Texas. We provide food, clothing and other necessary items
for people who cannot afford to pay for these items themselves. If you or someone you know needs help please <asp:HyperLink ID="contactUs1" runat="server" NavigateUrl="~/contact">contact us</asp:HyperLink>
information about what services we offer.
</div>
<div class="large-7 medium-7 small-12 columns">
<div class="large-4 medium-4 small-4 borderRightSmall text-center columns"><span class="largerText">Important Links</span><br /><asp:HyperLink ID="feedingamerica" NavigateUrl="http://www.feedingamerica.org/" Target="_blank" runat="server">www.feedingamerica.org</asp:HyperLink>
<br />
<asp:HyperLink ID="theSamaritansInn" NavigateUrl="http://www.thesamaritansinn.org" Target="_blank" runat="server">The Samaritan's Inn</asp:HyperLink>
<br /><br /><br /></div>
<div class="large-4 medium-4 small-4 borderRightSmall text-center columns"><span class="largerText">More Text</span><br />More text can go into this spot.<br /><br /><br /><br /></div>
<div class="large-4 medium-4 small-4 text-center columns"><span class="largerText">More Text 2</span><br />More text can go into this spot.<br /><br /><br /><br /></div>
</div>
</div>
<div class="large-12 medium-12 small-12" id="footerRed">
<div class="large-6 medium-6 small-12 left column">
<span class="smallerText">Copyright © 2012 <strong><asp:HyperLink ID="ntxDesigns" runat="server" NavigateUrl="http://www.ntx-designs.com" Target="_blank">NTX Designs</asp:HyperLink></strong>. All right reserved.</span>
<span class="largerText"><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/giving/">Giving</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/volunteering/">Volunteering</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/hours/">Hours</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/location/">Location</asp:HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/about/">About</asp:HyperLink> </span>
</div>
<div class="large-6 medium-6 small-12 text-right right column">
<asp:Image ID="googleIcon" ImageUrl="~/images/social-049_google.png" runat="server" AlternateText="Google Social Media Icon" />
<asp:Image ID="Image1" ImageUrl="~/images/social-043_twitter.png" runat="server" AlternateText="Twitter Social Media Icon" />
<asp:Image ID="Image2" ImageUrl="~/images/social-046_facebook.png" runat="server" AlternateText="Facebook Social Media Icon" />
</div>
</div>
</footer>
</form>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
Any help with this would be greatly appreciated!

Yep! Added a runt="server" and everything works perfectly. Thanks!