locked
form, radiobuttonlist and boostrap design issues RRS feed

  • Question

  • User36417256 posted
    <main class="my-form">
    <div class="cotainer-fluid">
    <div class="row">
    <div class="card">
    <h1 class="display-4 text-primary text-xs-center p-b-1 m-b-1">TEST</h1>
    <p>test test test</p>
    <form id="form1" class="form-inline" runat="server" dir="rtl">
    <div class="row col-md-14">
    <asp:radiobuttonlist id="contactTypeList" runat="server" cssclass="list-unstyled radiobuttonlist-inline" repeatlayout="UnorderedList">
    <asp:listitem value="1">op1</asp:listitem>
    <asp:listitem value="2">op2</asp:listitem>
    <asp:listitem value="3">op3</asp:listitem>
    <asp:listitem value="4">op4</asp:listitem>
    </asp:radiobuttonlist></div>
    </form></div> </div> </div> </main>

    /////CSS
    .checkboxlist-inline li, .radiobuttonlist-inline li { display: inline-flex; align-items: center; padding-left: 0; margin-right: .75rem; ; }
    .checkboxlist-inline li input, .radiobuttonlist-inline li input { ; margin-top: 0; margin-right: .3125rem; margin-left: 0; }
    .checkboxlist-inline li label, .radiobuttonlist-inline li label { margin-bottom: 0; }

    hi all!
    im trying to build mobile responsive contact form with bootsrap in asp.net and for some reason not only i cannot center the form content ( make the content align to center) because text align center doesnt work on inputs and the worst are the radiobuttonlist items.

    they slide outside page, go left or right but i cannot place them in the center nor give them and responsive effect.
    if i use merge or padding and try test it in mobile view, they slide outside the content, help text disappear and etc.
    any ideas how can i make this contact form responsive with boostrap and make the content in the center (not only text but also other inputs like text boxes, text areas, radiobuttons and etc) ?

    Monday, March 30, 2020 4:49 PM

All replies

  • User1535942433 posted

    Hi angardia,

    Accroding to your description,I suggest you could set radiodownlist RepeatDirection Horizontal and align center.

    More details,you could refer to below codes:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <style>
            .checkboxlist-inline li, .radiobuttonlist-inline li {
                display: inline-flex;
                align-items: center;
                padding-left: 0;
                margin-right: .75rem;
                ;
            }
    
                .checkboxlist-inline li input, .radiobuttonlist-inline li input {
                    ;
                    margin-top: 0;
                    margin-right: .3125rem;
                    margin-left: 0;
                }
    
                .checkboxlist-inline li label, .radiobuttonlist-inline li label {
                    margin-bottom: 0;
                }
            .card {
                text-align:center;
            }
        </style>
    
      <main class="my-form">
            <div class="cotainer-fluid">
                <div class="row">
                    <div class="card">
                        <h1 class="display-4 text-primary text-xs-center p-b-1 m-b-1">TEST</h1>
                        <p>test test test</p>
                        <form id="form1" class="form-inline" runat="server" dir="rtl">
                            <div class="row col-md-14">
                                <asp:RadioButtonList ID="contactTypeList" runat="server" CssClass="list-unstyled radiobuttonlist-inline" RepeatDirection="Horizontal" align="center">
                                    <asp:ListItem Value="1">op1</asp:ListItem>
                                    <asp:ListItem Value="2">op2</asp:ListItem>
                                    <asp:ListItem Value="3">op3</asp:ListItem>
                                    <asp:ListItem Value="4">op4</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, March 31, 2020 6:18 AM
  • User36417256 posted

    yes but when i do so and try to make screen smaller (responsive), the radiobutton list items goes outside of the screen.
    its like half text gets cut outside browser  screen.

    Wednesday, April 1, 2020 6:05 PM
  • User1535942433 posted

    Hi angardia,

    According to your description,I create a demo and works fine.

    Could you post your current codes and the result to us?It will help us to solve your problem.

    Best regards,

    Yijing Sun

    Thursday, April 2, 2020 7:01 AM
  • User36417256 posted

    what happens is that not only the buttons doesnt sit in middle of page:

    but when i open the radiobutton content:

    /*עיצוב לתוכן*/
    .formBody {
        background-color: rgb(143,192,221);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-size: cover;
        text-align:right
    }
    
    
    /*עיצוב לתפריט ניווט*/
    body {
        direction: rtl;
    }
    
    
    .navbar-toggler:focus {
        outline: none !important;
    }
    
    .navbar-toggler > .close {
        display: inline;
    }
    
    .navbar-toggler.collapsed > .close, .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
        display: none;
    }
    
    .dropdown-menu{
    color: #28a745 !important;
    font-weight: bold;
    ;
    }
    
    .icon-bar {
        width: 22px;
        height: 2px;
        background-color: #B6B6B6;
        display: block;
        transition: all 0.2s;
        margin-top: 4px
    }
    
    .navbar-toggler {
        border: none;
        background: transparent !important;
    }
    
    .navbar-toggler .top-bar {
            transform: rotate(45deg);
            transform-origin: 10% 10%;
        }
    
    .navbar-toggler .middle-bar {
            opacity: 0;
        }
    
    .navbar-toggler .bottom-bar {
            transform: rotate(-45deg);
            transform-origin: 10% 90%;
        }
    
    .navbar-toggler.collapsed .top-bar {
            transform: rotate(0);
        }
    
    .navbar-toggler.collapsed .middle-bar {
            opacity: 1;
        }
    
    .navbar-toggler.collapsed .bottom-bar {
            transform: rotate(0);
            
    }
    
    .navbar-light .navbar-nav .nav-link, .dropdown a, .dropdown li a {
        color: #7A7A7A !important;
        font-family: Assistant-SemiBold;
        font-size: 1rem;
        text-align: center;
    }
    
    
    .bg-light {
        width: 100%;
        z-index: 9999;
        top: 0px;
        margin-bottom: 0px;
    }
    
    .navbar-expand-lg {
        margin-bottom: 0px;
        background-color: #ff8859;
    }
    
    .dropdown-menu {
        border: none !important;
        border-radius: 0px !important;
    }
    
    /*testing nav BG*/
    
    .navbar.navbar-expand-lg.navbar-light.bg-light {
        background: url(../images/navBG.png) no-repeat top center;
        background-size: 100% 120px;
        height: 119px;
    }
    
    
    .navbar-light .navbar-nav .active > .nav-link {
        color: navy;
        font-weight: bold;
        background-image: url(../images/birds.png);
        height: 70px;
        background-size: 44px;
        background-;
        background-repeat: no-repeat;
        padding-bottom: 70px;
        text-align: center;
        margin-bottom: -36px;
    }
    
    
    
    .nav li:hover a {
        border: none;
        background: none;
        color: #00adee;
    }
    /*חסימת קישורים לא פעילים*/
    .isDisabled:hover {
        color: currentColor;
        cursor: not-allowed;
        opacity: 0.5;
        text-decoration: none;
    }
    
    
    
    ul.dropdown-menu.show {
        padding-right: 10px;
        text-align: center;
        margin-left: 10px;
    }
    
    @media (min-width: 992px) {
        .navbar-expand-lg .navbar-nav .dropdown-menu.show {
            padding-right: 10px;
            text-align: center;
            margin-left: -39px;
        }
    }
    @media (max-width: 992px) {
        .navbar-expand-lg .navbar-nav {
            background-color: white;
            
        }
        .navbar-light .navbar-nav .nav-link, .dropdown a, .dropdown li a {
            font-size: 2rem;
        }
        .navbar-light .navbar-nav .active > .nav-link {
            height: 107px;
            margin-bottom: -36px;
        }
    }
    
    
        /*עיצוב חלון אודות*/
        .forNav .popUp {
            background-color: white;
            height: 400px;
            ;
            top: 73px;
            z-index: 4;
            text-align: center;
            width: 750px;
            border-radius: 25px;
            padding: 10px;
            padding-bottom: 25px;
            right: 0;
            left: 0;
            margin-right: auto;
            margin-left: auto;
            direction: rtl;
            border: 1px solid black;
        }
    
        .forNav .bounceInDown {
            -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
    
        .closeAbout {
            float: left;
            font-size: 32px;
            margin-left: 17px;
        }
    
        .hide {
            display: none;
        }
    
    
    
    
        /*CONTENT*/
    
        h1 {
            font-size: 1.424em;
        }
    
        .display-4 {
            font-size: 2em;
        }
    
    
    
    /*testing design radiobuttenlist*/
    
    
        .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }
    
        .row {
            margin-right: -15px;
            margin-left: -15px;
        }
    
    .checkboxlist-inline li, .radiobuttonlist-inline li {
        display: inline-flex;
        align-items: center;
        padding-left: 0;
        margin-right: .75rem;
        ;
    }
    
        .checkboxlist-inline li input, .radiobuttonlist-inline li input {
            ;
            margin-top: 0;
            margin-right: .3125rem;
            margin-left: 0;
        }
    
        .checkboxlist-inline li label, .radiobuttonlist-inline li label {
            margin-bottom: 0;
        }
    
    .card {
        text-align: center;
    }
    
    <%@ Page Language="C#" MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bigTest.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8" />
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
        <!-- CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="styles/reset.css" rel="stylesheet" />
        <link href="styles/myStyle.css" rel="stylesheet" />
    
    
        <!-- Scripts -->
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="jScripts/JavaScript.js"></script>
    </head>
    <body class="formBody" runat="server">
        <%--תפריט ניווט--%>
        <header class="header">
            <a href="#" id="backToHomePage">
                <img src="images/amutaLogo.png" width="300" height="100" style="float:none"/>
            </a>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <%--            <button  class="navbar-toggler collapsed show" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>--%>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarsExampleDefault" aria-expanded="true" aria-label="Toggle navigation">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
                <div class="collapse navbar-collapse mx-auto w-auto justify-content-center" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">דף הבית<span class="sr-only">(current)</span></a>
                        </li>
    
                        <li class="dropdown nav-item">
                            <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-expanded="false">העמותה
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">למה לי</a></li>
                                <li><a href="#">זכויות</a></li>
                                <li><a href="#">הרשמה</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">מלגות</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">צור קשר</a>
                        </li>
                        <li class="nav-item forNav">
                            <a class="nav-link about" href="#">אודות</a>
                            <div id="aboutDiv" class="popUp bounceInDown hide">
                            
                            <a class="closeAbout" style="float: left", "font-size:20px">X</a>   
                            <b>פרויקט אתר מותאם למובייל לעמותה לסיעוד פסיכיאטרי</b>
                            <p>
                                אפיון ופיתוח:
                             <span>אנה סטריז'קו וטמיר דויטש </span>
                            </p>
                            <p>פותח במסגרת פרוייקט בקורס:</p>
                            <p> תכנות 3, תשע"פ</p>
                            <br />
                            <a href="https://www.hit.ac.il/telem/overview" target="_blank">הפקולטה לטכנולוגיות למידה</a>
                            <p>מכון טכנולוגי חולון</p>
                            <img id="hit" src="images/HIT-logo.jpg" width="100" height="100" />
                        </div>
                        </li>
    
    
    
    
                    </ul>
                </div>
            </nav>
        </header>
        <%-- טופס המכיל את כל סוגי ההרשמות--%>
        <main class="my-form">
            <div class="container body-content">
                <div class="row">           
                        <div class="card">
                            <h1>הרשמות לעמותה
                            </h1>
                            <p>יש לבחור בסוג ההרשמה המתאים</p>
                            <form id="form1" class="form-inline" runat="server"  dir="rtl">
                                <div class="row col-14" dir="rtl">
                                <asp:RadioButtonList ID="contactTypeList" runat="server"  CssClass="list-unstyled radiobuttonlist-inline" RepeatDirection="Horizontal" align="center">
                                    <asp:ListItem  Value="1">הרשמה לעמותה</asp:ListItem>
                                    <asp:ListItem  Value="2">הרשמה לגמלאים</asp:ListItem>
                                    <asp:ListItem  Value="3">הרשמה לפעילויות העמותה</asp:ListItem>
                                    <asp:ListItem  Value="4">הרשמה לדיוור ישיר</asp:ListItem>
                                </asp:RadioButtonList>
    
                                </div>
                                <%--    הרשמה לעמותה--%>
                                <article id="firstOption">
                                    <h2 >הרשמה לעמותה
                                    </h2>
                                    <p>
                                        על מנת להירשם / להצטרף לעמותה עליך:
                                            <br />
                                        1.  למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                                            <br />
                                        2. להוריד ולמלא את הטופס המצ"ב ולשלוח / לפקסס לגזברות בבית החולים בו הנך עובד/ת
                                    </p>
                                    <a href="http://www.apni.co.il/download/297/">להורדת קובץ הרשמה לעמותה</a>
                                    <p>
                                        ** לאחר הצטרפותך לעמותה ייעשה שימוש בייפוי הכוח לצורך גביית דמי חבר שנתיים.
                                    </p>
                                    <h3>טופס הצטרפות לעמותה
                                    </h3>
                                    <p>
                                        מילוי הטופס ושליחתו מהווה הצהרה:
                                            <br />
                                        "אני מבקש להיות חבר בעמותה. מטרות העמותה ותקוננה ידועים לי במידה ואתקבל כחבר בעמותה הנני מתחייב לקיים את הוראות התקנון ואת החלטת האסיפה הכללית של העמותה".
                                    </p>
                                    <div class="form-group">
                                        <label for="first_name" class="col-md-4 col-form-label text-md-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="last_name" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone_number" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="emailAddress" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
    
    
                                    <div class="form-group">
                                        <label for="joinDate" class="col-md-4 col-form-label">
                                            תאריך הצטרפות לעמותה
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="joinDate" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_number" class="col-md-4 col-form-label text-md-right">תעודת זהות</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="id_number" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="year_number1" class="col-md-4 col-form-label text-md-right">שנת לידה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="year_number1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="workplace" class="col-md-4 col-form-label text-md-right">
                                            מקום עבודה
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="workplace" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="job_posit" class="col-md-4 col-form-label text-md-right">
                                            תפקיד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="job_posit" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="home_adr" class="col-md-4 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="home_adr" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mikud" class="col-md-4 col-form-label text-md-right">
                                            מיקוד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mikud" class="form-control" />
                                        </div>
                                    </div>
                                    <p>
                                        קורס בבריאות הנפש:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="courseStatus" runat="server" Text="כן" GroupName="courseStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="courseStatus1" runat="server" Text="לא" GroupName="courseStatus" />
    
                                    </div>
                                    <p>
                                        תואר:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus1" runat="server" Text="ראשון" GroupName="degreeStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus2" runat="server" Text="שני" GroupName="degreeStatus" />
    
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus3" runat="server" Text="דוקטור" GroupName="degreeStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus4" runat="server" Text="ללא" GroupName="degreeStatus" />
                                    </div>
                                    <div class="form-group">
                                        <label for="otherEdu" class="col-md-4 col-form-label text-md-right">
                                            השכלה אחרת
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="otherEdu" class="form-control" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mustAgree1" class="col-5 col-form-label text-md-right">
                                            יפוי כח בלתי חוזר: אני הח"מ בדירוג האחים מצהיר/ה שהנני חבר/ה בעמותה לסיעוד פסיכיאטרי.
                                                <br />
                                            על החתום:
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mustAgree1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mustAgree2" class="col-5 col-form-label text-md-right">
                                            בהתאם להסכם הקיבוצי אני, מבקש/ת לשלם לעמותה דמי החבר עבורי החל משנה זו ואילך.
                                                <br />
                                            על החתום:
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mustAgree2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click1" />
                                    </div>
                                </article>
    
                                <%--      הרשמה לגמלאים--%>
                                <article id="secOption">
                                    <h2>הרשמה לגמלאים
                                    </h2>
                                    <p>על מנת להרשם / להצטרף לעמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שליחה)</p>
                                    <a href="http://www.apni.co.il/download/310/">להורדת טופס הרשמה לעמותה - גימלאים</a>
                                    <p>ולשליחתו בדואר רגיל</p>
                                    <strong>בהתאם להחלטת הנהלת העמותה תשלום דמי החבר לגמלאי יהיה 50% מהסכום המקובל.
                                                בנוסף, התשלום לגמלאי חבר עמותה עבור כנסים יהיה 50% מתעריף הכנס.
    
                                    </strong>
    
                                    <p>
                                        <br />
                                        <b>את התשלום יש להעביר לכבוד:
                                        </b>
                                        <br />
                                        העמותה לסיעוד פסיכיאטרי בישראל מרכז לבריאות הנפש
                                                לב השרון פרדסיה ת.ד. 90000 נתניה 42100.
                                    </p>
                                    <div class="form-group">
                                        <div class="form-group ">
                                            <label for="first_name1" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="text" id="first_name1" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="last_name1" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="text" id="last_name1" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="phone_number1" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="tel" id="phone_number1" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="emailAddress1" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="email" id="emailAddress1" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                            </div>
                                        </div>
    
                                        <label for="dateSent" class="col-md-3 col-form-label">
                                            תאריך שליחת הטופס
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="dateSent" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_number1" class="col-3 col-form-label text-md-right">תעודת זהות</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="id_number1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <p>
                                        מין:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="male" runat="server" Text="זכר" GroupName="gender" />
    
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="female" runat="server" Text="נקבה" GroupName="gender" />
                                    </div>
    
                                    <div class="form-group">
                                        <label for="year_number" class="col-3 col-form-label text-md-right">שנת לידה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="year_number" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="home_adr2" class="col-3 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-6">
                                            <input runat="server" type="text" id="home_adr2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mikud2" class="col-3 col-form-label text-md-right">
                                            מיקוד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mikud2" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="Button1" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click2" />
                                    </div>
                                </article>
                                <%--   הרשמה לפעילויות העמותה--%>
                                <article id="thirdOption">
                                    <h2>הרשמה לפעילויות העמותה<br />
                                        (כנסים, ימי עיון, קורסים, סדנאות, השתלמויות)</h2>
                                    <p>
                                        על מנת להרשם לפעילות העמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                                    </p>
                                    <strong>**חשוב - למלא את שם הפעילות הרצויה בצורה ברורה
                                    </strong>
                                    <div class="form-group ">
                                        <label for="first_name2" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name2" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="last_name2" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name2" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="phone_number2" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number2" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="emailAddress2" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress2" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="home_adr1" class="col-3 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-6">
                                            <input runat="server" type="text" id="home_adr1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="workplace2" class="col-3 col-form-label text-md-right">
                                            מקום עבודה
                                        </label>
                                        <div class="col-md-4">
                                            <input runat="server" type="text" id="workplace2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="activitySelect">סוג הפעילות</label>
                                        <asp:DropDownList ID="activitySelect" runat="server" CssClass="form-control col-3 col-form-label text-md-right">
                                            <asp:ListItem>כנס</asp:ListItem>
                                            <asp:ListItem>יום עיון</asp:ListItem>
                                            <asp:ListItem>קורס</asp:ListItem>
                                            <asp:ListItem>השתלמות</asp:ListItem>
                                            <asp:ListItem>סדנא</asp:ListItem>
                                            <asp:ListItem>אחר</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="form-group">
                                        <label for="describeActivity">שם הפעילות</label>
                                        <textarea runat="server" class="form-control col-3" id="describeActivity" rows="3" placeholder="חובה" required="required"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="activityDate" class="col-3 col-form-label">
                                            תאריך הפעילות
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="activityDate" required="required" />
                                        </div>
                                    </div>
    
                                    <p>
                                        חבר עמותה
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="membershipy" runat="server" Text="כן" GroupName="membership" />
    
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="membershipn" runat="server" Text="לא" GroupName="membership" />
                                    </div>
    
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm2" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click3" />
                                    </div>
                                </article>
                                <%--הרשמה לדיוור ישיר--%>
                                <article id="fourthOption">
                                    <h2>הרשמה לדיוור ישיר</h2>
                                    <p>
                                        הרשמה לקבלת מידע על הפעילויות השותפות של העמותה 
                                    </p>
                                    <div class="form-group">
                                        <label for="first_name3" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name3" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="last_name3" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name3" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="phone_number3" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number3" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="emailAddress3" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress3" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm3" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click4" />
                                    </div>
                                </article>
                            </form>
                        </div>
                    </div>          
            </div>
        </main>
    </body>
    </html>
    

    Monday, April 6, 2020 1:37 PM
  • User36417256 posted

    Hi angardia,

    According to your description,I create a demo and works fine.

    Could you post your current codes and the result to us?It will help us to solve your problem.

    Best regards,

    Yijing Sun

    what happens is that not only the buttons doesnt sit in middle of page:

    but when i open the radiobutton content:

    /*עיצוב לתוכן*/
    .formBody {
        background-color: rgb(143,192,221);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-size: cover;
        text-align:right
    }
    
    
    /*עיצוב לתפריט ניווט*/
    body {
        direction: rtl;
    }
    
    
    .navbar-toggler:focus {
        outline: none !important;
    }
    
    .navbar-toggler > .close {
        display: inline;
    }
    
    .navbar-toggler.collapsed > .close, .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
        display: none;
    }
    
    .dropdown-menu{
    color: #28a745 !important;
    font-weight: bold;
    ;
    }
    
    .icon-bar {
        width: 22px;
        height: 2px;
        background-color: #B6B6B6;
        display: block;
        transition: all 0.2s;
        margin-top: 4px
    }
    
    .navbar-toggler {
        border: none;
        background: transparent !important;
    }
    
    .navbar-toggler .top-bar {
            transform: rotate(45deg);
            transform-origin: 10% 10%;
        }
    
    .navbar-toggler .middle-bar {
            opacity: 0;
        }
    
    .navbar-toggler .bottom-bar {
            transform: rotate(-45deg);
            transform-origin: 10% 90%;
        }
    
    .navbar-toggler.collapsed .top-bar {
            transform: rotate(0);
        }
    
    .navbar-toggler.collapsed .middle-bar {
            opacity: 1;
        }
    
    .navbar-toggler.collapsed .bottom-bar {
            transform: rotate(0);
            
    }
    
    .navbar-light .navbar-nav .nav-link, .dropdown a, .dropdown li a {
        color: #7A7A7A !important;
        font-family: Assistant-SemiBold;
        font-size: 1rem;
        text-align: center;
    }
    
    
    .bg-light {
        width: 100%;
        z-index: 9999;
        top: 0px;
        margin-bottom: 0px;
    }
    
    .navbar-expand-lg {
        margin-bottom: 0px;
        background-color: #ff8859;
    }
    
    .dropdown-menu {
        border: none !important;
        border-radius: 0px !important;
    }
    
    /*testing nav BG*/
    
    .navbar.navbar-expand-lg.navbar-light.bg-light {
        background: url(../images/navBG.png) no-repeat top center;
        background-size: 100% 120px;
        height: 119px;
    }
    
    
    .navbar-light .navbar-nav .active > .nav-link {
        color: navy;
        font-weight: bold;
        background-image: url(../images/birds.png);
        height: 70px;
        background-size: 44px;
        background-;
        background-repeat: no-repeat;
        padding-bottom: 70px;
        text-align: center;
        margin-bottom: -36px;
    }
    
    
    
    .nav li:hover a {
        border: none;
        background: none;
        color: #00adee;
    }
    /*חסימת קישורים לא פעילים*/
    .isDisabled:hover {
        color: currentColor;
        cursor: not-allowed;
        opacity: 0.5;
        text-decoration: none;
    }
    
    
    
    ul.dropdown-menu.show {
        padding-right: 10px;
        text-align: center;
        margin-left: 10px;
    }
    
    @media (min-width: 992px) {
        .navbar-expand-lg .navbar-nav .dropdown-menu.show {
            padding-right: 10px;
            text-align: center;
            margin-left: -39px;
        }
    }
    @media (max-width: 992px) {
        .navbar-expand-lg .navbar-nav {
            background-color: white;
            
        }
        .navbar-light .navbar-nav .nav-link, .dropdown a, .dropdown li a {
            font-size: 2rem;
        }
        .navbar-light .navbar-nav .active > .nav-link {
            height: 107px;
            margin-bottom: -36px;
        }
    }
    
    
        /*עיצוב חלון אודות*/
        .forNav .popUp {
            background-color: white;
            height: 400px;
            ;
            top: 73px;
            z-index: 4;
            text-align: center;
            width: 750px;
            border-radius: 25px;
            padding: 10px;
            padding-bottom: 25px;
            right: 0;
            left: 0;
            margin-right: auto;
            margin-left: auto;
            direction: rtl;
            border: 1px solid black;
        }
    
        .forNav .bounceInDown {
            -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
    
        .closeAbout {
            float: left;
            font-size: 32px;
            margin-left: 17px;
        }
    
        .hide {
            display: none;
        }
    
    
    
    
        /*CONTENT*/
    
        h1 {
            font-size: 1.424em;
        }
    
        .display-4 {
            font-size: 2em;
        }
    
    
    
    /*testing design radiobuttenlist*/
    
    
        .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }
    
        .row {
            margin-right: -15px;
            margin-left: -15px;
        }
    
    .checkboxlist-inline li, .radiobuttonlist-inline li {
        display: inline-flex;
        align-items: center;
        padding-left: 0;
        margin-right: .75rem;
        ;
    }
    
        .checkboxlist-inline li input, .radiobuttonlist-inline li input {
            ;
            margin-top: 0;
            margin-right: .3125rem;
            margin-left: 0;
        }
    
        .checkboxlist-inline li label, .radiobuttonlist-inline li label {
            margin-bottom: 0;
        }
    
    .card {
        text-align: center;
    }
    
    <%@ Page Language="C#" MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bigTest.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8" />
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
        <!-- CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="styles/reset.css" rel="stylesheet" />
        <link href="styles/myStyle.css" rel="stylesheet" />
    
    
        <!-- Scripts -->
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="jScripts/JavaScript.js"></script>
    </head>
    <body class="formBody" runat="server">
        <%--תפריט ניווט--%>
        <header class="header">
            <a href="#" id="backToHomePage">
                <img src="images/amutaLogo.png" width="300" height="100" style="float:none"/>
            </a>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <%--            <button  class="navbar-toggler collapsed show" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>--%>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarsExampleDefault" aria-expanded="true" aria-label="Toggle navigation">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
                <div class="collapse navbar-collapse mx-auto w-auto justify-content-center" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">דף הבית<span class="sr-only">(current)</span></a>
                        </li>
    
                        <li class="dropdown nav-item">
                            <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-expanded="false">העמותה
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">למה לי</a></li>
                                <li><a href="#">זכויות</a></li>
                                <li><a href="#">הרשמה</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">מלגות</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">צור קשר</a>
                        </li>
                        <li class="nav-item forNav">
                            <a class="nav-link about" href="#">אודות</a>
                            <div id="aboutDiv" class="popUp bounceInDown hide">
                            
                            <a class="closeAbout" style="float: left", "font-size:20px">X</a>   
                            <b>פרויקט אתר מותאם למובייל לעמותה לסיעוד פסיכיאטרי</b>
                            <p>
                                אפיון ופיתוח:
                             <span>אנה סטריז'קו וטמיר דויטש </span>
                            </p>
                            <p>פותח במסגרת פרוייקט בקורס:</p>
                            <p> תכנות 3, תשע"פ</p>
                            <br />
                            <a href="https://www.hit.ac.il/telem/overview" target="_blank">הפקולטה לטכנולוגיות למידה</a>
                            <p>מכון טכנולוגי חולון</p>
                            <img id="hit" src="images/HIT-logo.jpg" width="100" height="100" />
                        </div>
                        </li>
    
    
    
    
                    </ul>
                </div>
            </nav>
        </header>
        <%-- טופס המכיל את כל סוגי ההרשמות--%>
        <main class="my-form">
            <div class="container body-content">
                <div class="row">           
                        <div class="card">
                            <h1>הרשמות לעמותה
                            </h1>
                            <p>יש לבחור בסוג ההרשמה המתאים</p>
                            <form id="form1" class="form-inline" runat="server"  dir="rtl">
                                <div class="row col-14" dir="rtl">
                                <asp:RadioButtonList ID="contactTypeList" runat="server"  CssClass="list-unstyled radiobuttonlist-inline" RepeatDirection="Horizontal" align="center">
                                    <asp:ListItem  Value="1">הרשמה לעמותה</asp:ListItem>
                                    <asp:ListItem  Value="2">הרשמה לגמלאים</asp:ListItem>
                                    <asp:ListItem  Value="3">הרשמה לפעילויות העמותה</asp:ListItem>
                                    <asp:ListItem  Value="4">הרשמה לדיוור ישיר</asp:ListItem>
                                </asp:RadioButtonList>
    
                                </div>
                                <%--    הרשמה לעמותה--%>
                                <article id="firstOption">
                                    <h2 >הרשמה לעמותה
                                    </h2>
                                    <p>
                                        על מנת להירשם / להצטרף לעמותה עליך:
                                            <br />
                                        1.  למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                                            <br />
                                        2. להוריד ולמלא את הטופס המצ"ב ולשלוח / לפקסס לגזברות בבית החולים בו הנך עובד/ת
                                    </p>
                                    <a href="http://www.apni.co.il/download/297/">להורדת קובץ הרשמה לעמותה</a>
                                    <p>
                                        ** לאחר הצטרפותך לעמותה ייעשה שימוש בייפוי הכוח לצורך גביית דמי חבר שנתיים.
                                    </p>
                                    <h3>טופס הצטרפות לעמותה
                                    </h3>
                                    <p>
                                        מילוי הטופס ושליחתו מהווה הצהרה:
                                            <br />
                                        "אני מבקש להיות חבר בעמותה. מטרות העמותה ותקוננה ידועים לי במידה ואתקבל כחבר בעמותה הנני מתחייב לקיים את הוראות התקנון ואת החלטת האסיפה הכללית של העמותה".
                                    </p>
                                    <div class="form-group">
                                        <label for="first_name" class="col-md-4 col-form-label text-md-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="last_name" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone_number" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="emailAddress" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
    
    
                                    <div class="form-group">
                                        <label for="joinDate" class="col-md-4 col-form-label">
                                            תאריך הצטרפות לעמותה
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="joinDate" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_number" class="col-md-4 col-form-label text-md-right">תעודת זהות</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="id_number" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="year_number1" class="col-md-4 col-form-label text-md-right">שנת לידה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="year_number1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="workplace" class="col-md-4 col-form-label text-md-right">
                                            מקום עבודה
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="workplace" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="job_posit" class="col-md-4 col-form-label text-md-right">
                                            תפקיד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="job_posit" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="home_adr" class="col-md-4 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="home_adr" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mikud" class="col-md-4 col-form-label text-md-right">
                                            מיקוד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mikud" class="form-control" />
                                        </div>
                                    </div>
                                    <p>
                                        קורס בבריאות הנפש:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="courseStatus" runat="server" Text="כן" GroupName="courseStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="courseStatus1" runat="server" Text="לא" GroupName="courseStatus" />
    
                                    </div>
                                    <p>
                                        תואר:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus1" runat="server" Text="ראשון" GroupName="degreeStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus2" runat="server" Text="שני" GroupName="degreeStatus" />
    
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus3" runat="server" Text="דוקטור" GroupName="degreeStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus4" runat="server" Text="ללא" GroupName="degreeStatus" />
                                    </div>
                                    <div class="form-group">
                                        <label for="otherEdu" class="col-md-4 col-form-label text-md-right">
                                            השכלה אחרת
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="otherEdu" class="form-control" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mustAgree1" class="col-5 col-form-label text-md-right">
                                            יפוי כח בלתי חוזר: אני הח"מ בדירוג האחים מצהיר/ה שהנני חבר/ה בעמותה לסיעוד פסיכיאטרי.
                                                <br />
                                            על החתום:
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mustAgree1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mustAgree2" class="col-5 col-form-label text-md-right">
                                            בהתאם להסכם הקיבוצי אני, מבקש/ת לשלם לעמותה דמי החבר עבורי החל משנה זו ואילך.
                                                <br />
                                            על החתום:
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mustAgree2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click1" />
                                    </div>
                                </article>
    
                                <%--      הרשמה לגמלאים--%>
                                <article id="secOption">
                                    <h2>הרשמה לגמלאים
                                    </h2>
                                    <p>על מנת להרשם / להצטרף לעמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שליחה)</p>
                                    <a href="http://www.apni.co.il/download/310/">להורדת טופס הרשמה לעמותה - גימלאים</a>
                                    <p>ולשליחתו בדואר רגיל</p>
                                    <strong>בהתאם להחלטת הנהלת העמותה תשלום דמי החבר לגמלאי יהיה 50% מהסכום המקובל.
                                                בנוסף, התשלום לגמלאי חבר עמותה עבור כנסים יהיה 50% מתעריף הכנס.
    
                                    </strong>
    
                                    <p>
                                        <br />
                                        <b>את התשלום יש להעביר לכבוד:
                                        </b>
                                        <br />
                                        העמותה לסיעוד פסיכיאטרי בישראל מרכז לבריאות הנפש
                                                לב השרון פרדסיה ת.ד. 90000 נתניה 42100.
                                    </p>
                                    <div class="form-group">
                                        <div class="form-group ">
                                            <label for="first_name1" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="text" id="first_name1" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="last_name1" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="text" id="last_name1" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="phone_number1" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="tel" id="phone_number1" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="emailAddress1" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="email" id="emailAddress1" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                            </div>
                                        </div>
    
                                        <label for="dateSent" class="col-md-3 col-form-label">
                                            תאריך שליחת הטופס
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="dateSent" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_number1" class="col-3 col-form-label text-md-right">תעודת זהות</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="id_number1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <p>
                                        מין:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="male" runat="server" Text="זכר" GroupName="gender" />
    
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="female" runat="server" Text="נקבה" GroupName="gender" />
                                    </div>
    
                                    <div class="form-group">
                                        <label for="year_number" class="col-3 col-form-label text-md-right">שנת לידה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="year_number" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="home_adr2" class="col-3 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-6">
                                            <input runat="server" type="text" id="home_adr2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mikud2" class="col-3 col-form-label text-md-right">
                                            מיקוד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mikud2" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="Button1" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click2" />
                                    </div>
                                </article>
                                <%--   הרשמה לפעילויות העמותה--%>
                                <article id="thirdOption">
                                    <h2>הרשמה לפעילויות העמותה<br />
                                        (כנסים, ימי עיון, קורסים, סדנאות, השתלמויות)</h2>
                                    <p>
                                        על מנת להרשם לפעילות העמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                                    </p>
                                    <strong>**חשוב - למלא את שם הפעילות הרצויה בצורה ברורה
                                    </strong>
                                    <div class="form-group ">
                                        <label for="first_name2" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name2" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="last_name2" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name2" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="phone_number2" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number2" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="emailAddress2" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress2" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="home_adr1" class="col-3 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-6">
                                            <input runat="server" type="text" id="home_adr1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="workplace2" class="col-3 col-form-label text-md-right">
                                            מקום עבודה
                                        </label>
                                        <div class="col-md-4">
                                            <input runat="server" type="text" id="workplace2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="activitySelect">סוג הפעילות</label>
                                        <asp:DropDownList ID="activitySelect" runat="server" CssClass="form-control col-3 col-form-label text-md-right">
                                            <asp:ListItem>כנס</asp:ListItem>
                                            <asp:ListItem>יום עיון</asp:ListItem>
                                            <asp:ListItem>קורס</asp:ListItem>
                                            <asp:ListItem>השתלמות</asp:ListItem>
                                            <asp:ListItem>סדנא</asp:ListItem>
                                            <asp:ListItem>אחר</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="form-group">
                                        <label for="describeActivity">שם הפעילות</label>
                                        <textarea runat="server" class="form-control col-3" id="describeActivity" rows="3" placeholder="חובה" required="required"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="activityDate" class="col-3 col-form-label">
                                            תאריך הפעילות
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="activityDate" required="required" />
                                        </div>
                                    </div>
    
                                    <p>
                                        חבר עמותה
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="membershipy" runat="server" Text="כן" GroupName="membership" />
    
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="membershipn" runat="server" Text="לא" GroupName="membership" />
                                    </div>
    
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm2" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click3" />
                                    </div>
                                </article>
                                <%--הרשמה לדיוור ישיר--%>
                                <article id="fourthOption">
                                    <h2>הרשמה לדיוור ישיר</h2>
                                    <p>
                                        הרשמה לקבלת מידע על הפעילויות השותפות של העמותה 
                                    </p>
                                    <div class="form-group">
                                        <label for="first_name3" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name3" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="last_name3" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name3" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="phone_number3" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number3" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="emailAddress3" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress3" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm3" Text="שליחה" CssClass="btn btn-lg btn-primary" OnClick="SendForm_Click4" />
                                    </div>
                                </article>
                            </form>
                        </div>
                    </div>          
            </div>
        </main>
    </body>
    </html>
    
    Monday, April 6, 2020 7:56 PM
  • User1535942433 posted

    Hi angardia,

    Accroding to your description and codes.As far as I think,col full grid is 12 instead of 14.I suggest you could press f12 and you could select elements,after then you could ajdust the css style of elements accroding to your reqiurments.I create a demo.

    Mode details,you could refer to below codes:

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <!-- CSS -->
       <%-- <link href="styles/reset.css" rel="stylesheet" />
        <link href="styles/myStyle.css" rel="stylesheet" />--%>
    
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <!-- Scripts -->
        <script src="Scripts/popper.min.js"></script>
    
        <script src="Scripts/bootstrap.min.js"></script>
        <style>
            .formBody {
                background-color: rgb(143,192,221);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-size: cover;
                text-align: right
            }
    
    
            /*עיצוב לתפריט ניווט*/
            body {
                direction: rtl;
            }
    
    
            .navbar-toggler:focus {
                outline: none !important;
            }
    
            .navbar-toggler > .close {
                display: inline;
            }
    
            .navbar-toggler.collapsed > .close, .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
                display: none;
            }
    
            .dropdown-menu {
                color: #28a745 !important;
                font-weight: bold;
                ;
            }
    
            .icon-bar {
                width: 22px;
                height: 2px;
                background-color: #B6B6B6;
                display: block;
                transition: all 0.2s;
                margin-top: 4px
            }
    
            .navbar-toggler {
                border: none;
                background: transparent !important;
            }
    
                .navbar-toggler .top-bar {
                    transform: rotate(45deg);
                    transform-origin: 10% 10%;
                }
    
                .navbar-toggler .middle-bar {
                    opacity: 0;
                }
    
                .navbar-toggler .bottom-bar {
                    transform: rotate(-45deg);
                    transform-origin: 10% 90%;
                }
    
                .navbar-toggler.collapsed .top-bar {
                    transform: rotate(0);
                }
    
                .navbar-toggler.collapsed .middle-bar {
                    opacity: 1;
                }
    
                .navbar-toggler.collapsed .bottom-bar {
                    transform: rotate(0);
                }
    
            .navbar-light .navbar-nav .nav-link, .dropdown a, .dropdown li a {
                color: #7A7A7A !important;
                font-family: Assistant-SemiBold;
                font-size: 1rem;
                text-align: center;
            }
    
    
            .bg-light {
                width: 100%;
                z-index: 9999;
                top: 0px;
                margin-bottom: 0px;
            }
    
            .navbar-expand-lg {
                margin-bottom: 0px;
                background-color: #ff8859;
            }
    
            .dropdown-menu {
                border: none !important;
                border-radius: 0px !important;
            }
    
            /*testing nav BG*/
    
            .navbar.navbar-expand-lg.navbar-light.bg-light {
                background: url(../images/navBG.png) no-repeat top center;
                background-size: 100% 120px;
                height: 119px;
            }
    
    
            .navbar-light .navbar-nav .active > .nav-link {
                color: navy;
                font-weight: bold;
                background-image: url(../images/birds.png);
                height: 70px;
                background-size: 44px;
                background-;
                background-repeat: no-repeat;
                padding-bottom: 70px;
                text-align: center;
                margin-bottom: -36px;
            }
    
    
    
            .nav li:hover a {
                border: none;
                background: none;
                color: #00adee;
            }
            /*חסימת קישורים לא פעילים*/
            .isDisabled:hover {
                color: currentColor;
                cursor: not-allowed;
                opacity: 0.5;
                text-decoration: none;
            }
    
    
    
            ul.dropdown-menu.show {
                padding-right: 10px;
                text-align: center;
                margin-left: 10px;
            }
    
            @media (min-width: 992px) {
                .navbar-expand-lg .navbar-nav .dropdown-menu.show {
                    padding-right: 10px;
                    text-align: center;
                    margin-left: -39px;
                }
            }
    
            @media (max-width: 992px) {
                .navbar-expand-lg .navbar-nav {
                    background-color: white;
                }
    
                .navbar-light .navbar-nav .nav-link, .dropdown a, .dropdown li a {
                    font-size: 2rem;
                }
    
                .navbar-light .navbar-nav .active > .nav-link {
                    height: 107px;
                    margin-bottom: -36px;
                }
            }
    
    
            /*עיצוב חלון אודות*/
            .forNav .popUp {
                background-color: white;
                height: 400px;
                ;
                top: 73px;
                z-index: 4;
                text-align: center;
                width: 750px;
                border-radius: 25px;
                padding: 10px;
                padding-bottom: 25px;
                right: 0;
                left: 0;
                margin-right: auto;
                margin-left: auto;
                direction: rtl;
                border: 1px solid black;
            }
    
            .forNav .bounceInDown {
                -webkit-animation-name: bounceInDown;
                animation-name: bounceInDown;
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
    
            .closeAbout {
                float: left;
                font-size: 32px;
                margin-left: 17px;
            }
    
            .hide {
                display: none;
            }
    
    
    
    
            /*CONTENT*/
    
            h1 {
                font-size: 1.424em;
            }
    
            .display-4 {
                font-size: 2em;
            }
    
    
    
            /*testing design radiobuttenlist*/
    
    
            .container-fluid {
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
            }
    
            .row {
                margin-right: -15px;
                margin-left: -15px;
            }
    
            .checkboxlist-inline li, .radiobuttonlist-inline li {
                display: inline-flex;
                align-items: center;
                padding-left: 0;
                margin-right: .75rem;
                ;
            }
    
                .checkboxlist-inline li input, .radiobuttonlist-inline li input {
                    ;
                    margin-top: 0;
                    margin-right: .3125rem;
                    margin-left: 0;
                }
    
                .checkboxlist-inline li label, .radiobuttonlist-inline li label {
                    margin-bottom: 0;
                }
    
            .card {
                text-align: center;
            }
        </style>
    </head>
    <body class="formBody" runat="server">
        <%--תפריט ניווט--%>
        <header class="header">
            <a href="#" id="backToHomePage">
                <img src="images/amutaLogo.png" width="300" height="100" style="float:none"/>
            </a>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <%--            <button  class="navbar-toggler collapsed show" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>--%>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarsExampleDefault" aria-expanded="true" aria-label="Toggle navigation">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
                <div class="collapse navbar-collapse mx-auto w-auto justify-content-center" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">דף הבית<span class="sr-only">(current)</span></a>
                        </li>
    
                        <li class="dropdown nav-item">
                            <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-expanded="false">העמותה
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">למה לי</a></li>
                                <li><a href="#">זכויות</a></li>
                                <li><a href="#">הרשמה</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">מלגות</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">צור קשר</a>
                        </li>
                        <li class="nav-item forNav">
                            <a class="nav-link about" href="#">אודות</a>
                            <div id="aboutDiv" class="popUp bounceInDown hide">
                            
                            <a class="closeAbout" style="float: left", "font-size:20px">X</a>   
                            <b>פרויקט אתר מותאם למובייל לעמותה לסיעוד פסיכיאטרי</b>
                            <p>
                                אפיון ופיתוח:
                             <span>אנה סטריז'קו וטמיר דויטש </span>
                            </p>
                            <p>פותח במסגרת פרוייקט בקורס:</p>
                            <p> תכנות 3, תשע"פ</p>
                            <br />
                            <a href="https://www.hit.ac.il/telem/overview" target="_blank">הפקולטה לטכנולוגיות למידה</a>
                            <p>מכון טכנולוגי חולון</p>
                            <img id="hit" src="images/HIT-logo.jpg" width="100" height="100" />
                        </div>
                        </li>
    
    
    
    
                    </ul>
                </div>
            </nav>
        </header>
        <%-- טופס המכיל את כל סוגי ההרשמות--%>
        <main class="my-form">
            <div class="container body-content">
                <div class="row">           
                        <div class="card">
                            <h1>הרשמות לעמותה
                            </h1>
                            <p>יש לבחור בסוג ההרשמה המתאים</p>
                            <form id="form1" class="form-inline" runat="server"  dir="rtl">
                                <div class="row col-12" dir="rtl">
                                <asp:RadioButtonList ID="contactTypeList" runat="server"  CssClass="list-unstyled radiobuttonlist-inline" RepeatDirection="Horizontal" align="center">
                                    <asp:ListItem  Value="1">הרשמה לעמותה</asp:ListItem>
                                    <asp:ListItem  Value="2">הרשמה לגמלאים</asp:ListItem>
                                    <asp:ListItem  Value="3">הרשמה לפעילויות העמותה</asp:ListItem>
                                    <asp:ListItem  Value="4">הרשמה לדיוור ישיר</asp:ListItem>
                                </asp:RadioButtonList>
    
                                </div>
                                <%--    הרשמה לעמותה--%>
                                <article id="firstOption">
                                    <h2 >הרשמה לעמותה
                                    </h2>
                                    <p>
                                        על מנת להירשם / להצטרף לעמותה עליך:
                                            <br />
                                        1.  למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                                            <br />
                                        2. להוריד ולמלא את הטופס המצ"ב ולשלוח / לפקסס לגזברות בבית החולים בו הנך עובד/ת
                                    </p>
                                    <a href="http://www.apni.co.il/download/297/">להורדת קובץ הרשמה לעמותה</a>
                                    <p>
                                        ** לאחר הצטרפותך לעמותה ייעשה שימוש בייפוי הכוח לצורך גביית דמי חבר שנתיים.
                                    </p>
                                    <h3>טופס הצטרפות לעמותה
                                    </h3>
                                    <p>
                                        מילוי הטופס ושליחתו מהווה הצהרה:
                                            <br />
                                        "אני מבקש להיות חבר בעמותה. מטרות העמותה ותקוננה ידועים לי במידה ואתקבל כחבר בעמותה הנני מתחייב לקיים את הוראות התקנון ואת החלטת האסיפה הכללית של העמותה".
                                    </p>
                                    <div class="form-group">
                                        <label for="first_name" class="col-md-4 col-form-label text-md-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="last_name" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone_number" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="emailAddress" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
    
    
                                    <div class="form-group">
                                        <label for="joinDate" class="col-md-4 col-form-label">
                                            תאריך הצטרפות לעמותה
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="joinDate" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_number" class="col-md-4 col-form-label text-md-right">תעודת זהות</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="id_number" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="year_number1" class="col-md-4 col-form-label text-md-right">שנת לידה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="year_number1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="workplace" class="col-md-4 col-form-label text-md-right">
                                            מקום עבודה
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="workplace" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="job_posit" class="col-md-4 col-form-label text-md-right">
                                            תפקיד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="job_posit" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="home_adr" class="col-md-4 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="home_adr" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mikud" class="col-md-4 col-form-label text-md-right">
                                            מיקוד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mikud" class="form-control" />
                                        </div>
                                    </div>
                                    <p>
                                        קורס בבריאות הנפש:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="courseStatus" runat="server" Text="כן" GroupName="courseStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="courseStatus1" runat="server" Text="לא" GroupName="courseStatus" />
    
                                    </div>
                                    <p>
                                        תואר:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus1" runat="server" Text="ראשון" GroupName="degreeStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus2" runat="server" Text="שני" GroupName="degreeStatus" />
    
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus3" runat="server" Text="דוקטור" GroupName="degreeStatus" />
    
                                    </div>
    
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="degreeStatus4" runat="server" Text="ללא" GroupName="degreeStatus" />
                                    </div>
                                    <div class="form-group">
                                        <label for="otherEdu" class="col-md-4 col-form-label text-md-right">
                                            השכלה אחרת
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="otherEdu" class="form-control" placeholder="" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mustAgree1" class="col-5 col-form-label text-md-right">
                                            יפוי כח בלתי חוזר: אני הח"מ בדירוג האחים מצהיר/ה שהנני חבר/ה בעמותה לסיעוד פסיכיאטרי.
                                                <br />
                                            על החתום:
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mustAgree1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mustAgree2" class="col-5 col-form-label text-md-right">
                                            בהתאם להסכם הקיבוצי אני, מבקש/ת לשלם לעמותה דמי החבר עבורי החל משנה זו ואילך.
                                                <br />
                                            על החתום:
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mustAgree2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm" Text="שליחה" CssClass="btn btn-lg btn-primary" />
                                    </div>
                                </article>
    
                                <%--      הרשמה לגמלאים--%>
                                <article id="secOption">
                                    <h2>הרשמה לגמלאים
                                    </h2>
                                    <p>על מנת להרשם / להצטרף לעמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שליחה)</p>
                                    <a href="http://www.apni.co.il/download/310/">להורדת טופס הרשמה לעמותה - גימלאים</a>
                                    <p>ולשליחתו בדואר רגיל</p>
                                    <strong>בהתאם להחלטת הנהלת העמותה תשלום דמי החבר לגמלאי יהיה 50% מהסכום המקובל.
                                                בנוסף, התשלום לגמלאי חבר עמותה עבור כנסים יהיה 50% מתעריף הכנס.
    
                                    </strong>
    
                                    <p>
                                        <br />
                                        <b>את התשלום יש להעביר לכבוד:
                                        </b>
                                        <br />
                                        העמותה לסיעוד פסיכיאטרי בישראל מרכז לבריאות הנפש
                                                לב השרון פרדסיה ת.ד. 90000 נתניה 42100.
                                    </p>
                                    <div class="form-group">
                                        <div class="form-group ">
                                            <label for="first_name1" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="text" id="first_name1" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="last_name1" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="text" id="last_name1" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="phone_number1" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="tel" id="phone_number1" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="emailAddress1" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                            <div class="col-md-3">
                                                <input runat="server" type="email" id="emailAddress1" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                            </div>
                                        </div>
    
                                        <label for="dateSent" class="col-md-3 col-form-label">
                                            תאריך שליחת הטופס
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="dateSent" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_number1" class="col-3 col-form-label text-md-right">תעודת זהות</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="id_number1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <p>
                                        מין:
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="male" runat="server" Text="זכר" GroupName="gender" />
    
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="female" runat="server" Text="נקבה" GroupName="gender" />
                                    </div>
    
                                    <div class="form-group">
                                        <label for="year_number" class="col-3 col-form-label text-md-right">שנת לידה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="year_number" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="home_adr2" class="col-3 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-6">
                                            <input runat="server" type="text" id="home_adr2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mikud2" class="col-3 col-form-label text-md-right">
                                            מיקוד
                                        </label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="mikud2" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="Button1" Text="שליחה" CssClass="btn btn-lg btn-primary" />
                                    </div>
                                </article>
                                <%--   הרשמה לפעילויות העמותה--%>
                                <article id="thirdOption">
                                    <h2>הרשמה לפעילויות העמותה<br />
                                        (כנסים, ימי עיון, קורסים, סדנאות, השתלמויות)</h2>
                                    <p>
                                        על מנת להרשם לפעילות העמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
                                    </p>
                                    <strong>**חשוב - למלא את שם הפעילות הרצויה בצורה ברורה
                                    </strong>
                                    <div class="form-group ">
                                        <label for="first_name2" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name2" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="last_name2" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name2" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="phone_number2" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number2" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="emailAddress2" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress2" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="home_adr1" class="col-3 col-form-label text-md-right">
                                            כתובת מגורים
                                        </label>
                                        <div class="col-md-6">
                                            <input runat="server" type="text" id="home_adr1" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="workplace2" class="col-3 col-form-label text-md-right">
                                            מקום עבודה
                                        </label>
                                        <div class="col-md-4">
                                            <input runat="server" type="text" id="workplace2" class="form-control" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="activitySelect">סוג הפעילות</label>
                                        <asp:DropDownList ID="activitySelect" runat="server" CssClass="form-control col-3 col-form-label text-md-right">
                                            <asp:ListItem>כנס</asp:ListItem>
                                            <asp:ListItem>יום עיון</asp:ListItem>
                                            <asp:ListItem>קורס</asp:ListItem>
                                            <asp:ListItem>השתלמות</asp:ListItem>
                                            <asp:ListItem>סדנא</asp:ListItem>
                                            <asp:ListItem>אחר</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="form-group">
                                        <label for="describeActivity">שם הפעילות</label>
                                        <textarea runat="server" class="form-control col-3" id="describeActivity" rows="3" placeholder="חובה" required="required"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="activityDate" class="col-3 col-form-label">
                                            תאריך הפעילות
                                        </label>
                                        <br />
                                        <div class="col-md-3">
                                            <input runat="server" class="form-control" type="date" value="2019-08-19" id="activityDate" required="required" />
                                        </div>
                                    </div>
    
                                    <p>
                                        חבר עמותה
                                    </p>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="membershipy" runat="server" Text="כן" GroupName="membership" />
    
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
    
                                        <asp:RadioButton ID="membershipn" runat="server" Text="לא" GroupName="membership" />
                                    </div>
    
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm2" Text="שליחה" CssClass="btn btn-lg btn-primary" />
                                    </div>
                                </article>
                                <%--הרשמה לדיוור ישיר--%>
                                <article id="fourthOption">
                                    <h2>הרשמה לדיוור ישיר</h2>
                                    <p>
                                        הרשמה לקבלת מידע על הפעילויות השותפות של העמותה 
                                    </p>
                                    <div class="form-group">
                                        <label for="first_name3" class="col-md-4 col-form-label float-right">שם פרטי</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="first_name3" class="form-control" name="first-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="last_name3" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="text" id="last_name3" class="form-control" name="last-name" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="phone_number3" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="tel" id="phone_number3" class="form-control" name="phoneNum" placeholder="חובה" required="required" />
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="emailAddress3" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
                                        <div class="col-md-3">
                                            <input runat="server" type="email" id="emailAddress3" class="form-control" placeholder="חובה" name="email-address" required="required" />
                                        </div>
                                    </div>
    
                                    <div class="col-md-6 offset-md-4">
                                        <asp:Button runat="server" ID="sendForm3" Text="שליחה" CssClass="btn btn-lg btn-primary"/>
                                    </div>
                                </article>
                            </form>
                        </div>
                    </div>          
            </div>
        </main>
    </body>
    </html>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, April 7, 2020 9:44 AM