Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Share tech news, updates, or what's on your mind.

Sign up to Post

I am trying to create a button-type nav bar on my classic asp pages that expands when it is clicked.  I am only getting a small "object" that, when clicked, does expand and show the links but does not have the formatting it should.  Any help would be much appreciated.  I can't post the page because it is login-based but here is some info (the rest of the bootstrap in the site works fine: www.gopherstateevents.com):

Nav contents:
			<nav class="navbar navbar-inverse">
  				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span> 
      					</button>
    				</div>
    				<div class="collapse navbar-collapse" id="myNavbar">
      					<ul class="nav navbar-nav">
							<li>List Items here</li>
						</ul>
					</div>
				</div>
			</nav>

Open in new window


Header:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="alternate" href="http://gopherstateevents.com" hreflang="en-us" />
<link rel="shortcut icon" href="/assets/images/g-transparent2-351x345.png" type="image/x-icon">
<link rel="stylesheet" 

Open in new window

0
Free Tool: ZipGrep
LVL 11
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

I have the accordions working just as i like but i want them in two different colors. I am using the bootstrap 3 code and have created a new css for the main classes. I tried to copy the css and add the additional class but when i do it doesnt work or screws up the layout on the page. any help would be appreciated

.doctor p {
  font-size: .8em;
}

.doctor img {
  width: 100%;
   
}

.doctor .panel-default>.panel-heading{
    color:#6f4e36;
   background-color: #95deae;
  /*background-image: linear-gradient(to bottom, #95deae, #49a5bf);*/
    border-color:transparent;
}
.doctor .panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.doctor .panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
.doctor .panel{
    margin-bottom:20px;
    background-color:transparent;
    border: none transparent;
    border-radius:4px;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
    box-shadow:0 1px 1px rgba(0,0,0,.05)
}
.doctor .panel-body{
    padding:15px;
	/*background-color: #E4D29D;*/
    background-image:  linear-gradient(to bottom, rgba(246,230,180,1) 0%, rgba(134,199,156,1) 0%, 

Open in new window

0
seeing weird characters from webresponse for bootstrap contents. results expected as this image expected.png, but all i see is below image
result.png
0
I copied the code from an example online and included bootstrap 4 css, bootstrap js,  bootstrap.bundle.js and jquery. Looks like I got it all, but instead of displaying nice horizontal menu like in example, I am getting vertical menu on the right-hand side of the page. What am i doing wrong? It does work with Bottstrap 3.3.7 though. What can I change to get it to display correctly with Bootstrap 4?

  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

Open in new window

0
I saved my images into bytes in project B to show it in project A.
I did this to try to get the image from the particular id to show, problem is 1.image does not show , 2.it only shows image from EImage01Byte and i need to show the image from EImage0Byte when i click next
<div class="carousel-inner" role="listbox">
      <asp:Repeater ID="rptrImages" runat="server">
          <ItemTemplate>
    <div class="item <%# GetActiveClass(Container.ItemIndex) %>">
       <img src="<%#Eval("EID") %>/<%# "data:image;base64," + Convert.ToBase64String((byte[]) Eval("EImage01Byte")) %>"></img>
  </div>  
              </ItemTemplate>
          </asp:Repeater>
  </div>

Open in new window

Then i did this. Now, all the images in EImage01Byte regardless of the id, so thats a problem, also i need the second image
 <div class="carousel-inner" role="listbox">
      <asp:Repeater ID="rptrImages" runat="server">
          <ItemTemplate>
    <div class="item <%# GetActiveClass(Container.ItemIndex) %>">
       <img src="<%# "data:image;base64," + Convert.ToBase64String((byte[]) Eval("EImage01Byte")) %>"></img>
    </div>  
              </ItemTemplate>
          </asp:Repeater>
  </div>

Open in new window

my code behind is like this !!
 BllCompEventCatalog eve = new BllCompEventCatalog();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindEventImages();
            }
        }
        private void BindEventImages()
        {
            Int64 EID = Convert.ToInt64(Request.QueryString["EID"]);
            DataTable ds = eve.getEventAll();
            rptrImages.DataSource = ds;
            rptrImages.DataBind();
        }
        protected string GetActiveClass(int ItemIndex)
        {
            if (ItemIndex == 0)
            {
                return "active";
            }
            else
            {
                return "";
            }
        }

Open in new window

0
ttip.docxHi All:

I had a really simple question. How do you combine options and tooltip to have this effect as you see in modern travel portal. I have included a document displaying a above mentioned effect. A small example would be really helpful. I guess it is a combination of option and tooltip.

Look forward to your responses.

Best Regards,

Sunnybrad
0
Hi Experts,

Am developing bootstrap component where it can accept another component as input and show the output in bootstrap modal and i refered https://angular.io/guide/dynamic-component-loader and its not clear for my understanding .Any one has done this before . please let me know

Thanks in Advance Experts
0
Hello

I would like to open bootstrap modal window from URL that is belongs to another page or form. Please assist on this.

Earlier i had all the things in one page and that is messing with my current events of the form and all.

Please assist me on how to call modal window which is there in another file or URL or page.

OR

Is there any other way where I can open popup window/modal window ( Responsive)  to open page for user where they can enter the details ?

Thanks
0
I am opening bootstrap modal window there in validation I am calling JS validation plugin to make validation but I am getting below error:

cannot read property 'addMethod' of undefined. I am having below source defined in page header.

Below is js source of the code
function submitContactForm() {
$.validator.addMethod("loginRegex", function(value, element) {
        return this.optional(element) || /^[a-z0-9]+$/i.test(value);
    }, "Username must contain only letters, numbers, or dashes.");
....

Source of the page.
<link rel="stylesheet" href="/myfolder/Mysite/bootstrap/css/bootstrap.min.css" />
<!--<link rel="stylesheet" href="/myfolder/Mysite/bootstrap/css/bootstrap.css" />-->
<link rel="stylesheet" href="/myfolder/Mysite/css/style.css" />
<link rel="stylesheet" href="/myfolder/Mysite/font-awesome/css/font-awesome.min.css" />
<script src="/myfolder/Mysite/js/jquery-1.9.1.js"></script>
<script src="/myfolder/Mysite/js/jquery.validate.js"></script>
<script src="/myfolder/Mysite/js/jquery.blink.js"></script>
<script src="/myfolder/Mysite/js/jquery.formatCurrency-1.4.0.min.js"></script>
<script src="/myfolder/Mysite/js/jqClock.min.js"></script>
<script src="/myfolder/Mysite/js/freeAPI.js"></script>
<script src="/myfolder/Mysite/js/jquery.keyboard.min.js"></script>
<!--<link rel="stylesheet" href="/myfolder/Mysite/css/style.css" />-->
<link rel="stylesheet" href="/myfolder/Mysite/colorbox.css" />
<link rel="stylesheet" …
0
Hello

I have below bootstrap HTML code which generates Login option and which eventually opens modal dialog window for three options with buttons called registration, login and forgot password, when user clicks on login and if user gets succeed in login I want to remove option called Login and instead I need logout, your previous orders and edit your profile option.

Please help how it can be achieved here below is the code. I can check if user is logged in or not using username field on the form.
if users is logged in it would contain user name else it would contain "Anonymous, in case of logged in user I want aforesaid options. Please assist.

  <li class="dropdown"> 
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
                       <img src="images/user-icon.png" class="right-icon user-icon" style="width:12px"/> <img src="images/arrow-down-icon.png" class="arrow-down-icon right-icon" width="10px"/>
                   </a> 
                    <ul class="dropdown-menu dropdown-user"> 
                      <li><a href="#" data-toggle="modal" data-target="#myModal">
                        Login</a>
                     </li>
                     </ul> 
                   
                 </li> 
              
         <li class="dropdown"> 
                   <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
                       <img src="images/location-icon.png" class="location-icon right-icon" 

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 5
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Hello

I would like to have attached web page layout as attached, can anyone please help me on this ? How I can start with this, this has to be done using HTML5, Jquery and Bootstrap, can any one just give me idea how to start on this?
0
Hello i am new to gulp and i am trying to cache bootstrap css.
Gulp documentation is not very good, so any help would be appreciated !
0
I am getting an error in MDT while capturing the custom image. Settings looks ok, connection is fine. I am able to get to the share from the reference machine. MDT 2013 and Reference machines (windows 10) are not part of domain. Can you please tell me if rules and bootstrap looks ok?

Error:
A connection to the deployment share could not be made. connection Ok . Possible cause:invalid credentials.

UNC path :\\192.168.101.1\Deploymentshare$\

these are the rules:
[Settings]
Priority=Default
Properties=MyCustomProperty

[Default]
OSInstall=Y
SkipCapture=NO
SkipAdminPassword=YES
SkipProductKey=YES
SkipComputerBackup=YES
SkipBitLocker=NO

Bootstrap:

[Settings]
Priority=Default

[Default]
DeployRoot=\\192.168.101.1\DeploymentShare$
0
I'm using bootstrap-select for a few select items, I'm wanting to use a tooltip when someone clicks on the select. I have the code to show when the select is clicked but I want to insert the title into the jquery.

<div class="form-group">
  <label>My Select: </label>
    <select class="bootstrap-select" data-width="100%" id="myselect">
      <option value="1" selected>1</option>
      <option value="2">2</option>
    </select>
</div>


$('#myselecet').on('shown.bs.select', function (e) {
  $('#myselect').tooltip('show');
});
0
I'm looking to handle the validation of a particular form in a more programmatic way, but I'm struggling with it.  

I have static inputs for 15 rows of first and last names, so 30 total text inputs.  I'll just use two rows in my example, so hopefully that'll cut down on the post length.

The example I'm posting below is what I ended up going with out of frustration, and it's not even totally what I need.  
Here are the rules to the validation that I'm looking for:
  • Must have at least one entry of a first and last name.  It does not matter which row this entry is on.  If someone enters a first and last name on row 2 instead of row 1, it should not show row 1 as being in error.  The form would be valid under this condition.
  • If a user clicks submit on a blank form, the error message is only shown under the first row of input vs. all inputs
  • If a row has a first name, the last name is required. If a row has a last name, the first name is required.
  • If a user deletes an entry in it's entirety, the first and last names in this row should no longer be required.

It is not an option for me to include a way for users to dynamically add additional inputs as needed. I have to go the static route.  Compatibility with older browsers is a concern, but not to the degree of switching to server-side validation methods. I'm using jQuery 2.2.4 if that helps.

Here are some methods I tried and failed to implement:
0
This is so simple but I can't find how to do it. I want to make 3 images and description appear on the same row inside a DIV, but I've tried several times and I get them BUT LIKE A LIST, one below each other !
I would like :

Image text                    image text                   Image text
           more  text                     more text


<div class="row">
  <div class="col-sm-12">
  </div>
</div>
0
Can I have one MODAL with several buttons and just change the MODAL-BODY ? Right now I have :

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Q & A</button>         

    <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
                            <p>This is a test</p>
      </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

But I would like to have that same modal, and then be able to send the modal-body according to the button that was pressed. I want to do this to avoid writing a modal per button (coding would be too long and I just want to modify the modal content.
Ex, Button 1 - modal this is button 1 content
Button 2 - modal this is button 2 content
Button 3 - modal this is button 3 content
etc...
0
Hi, I am using bootstrap treeview , I would like to know how I can add node dynamically at run time. means users should able to add any node.

any help will be highly appreciated.

Regards,

Aamir
addNodes.png
0
i have to represent no of device for each status(new,paired,blocked..etc) in the charts.
i want use  jquery and bootstrap with out using CanvasJS
please provide example of donut charts
0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Hi,

My app use Cflayout border and cflayout tabs inside one of the panel and i use bootstrap for responsive.

In CF9/10 my app works fine, when i resize browser window, the content of tab adapt and responsive works fine, in CF2016 no :/

Here is the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
		<cflayout name="layoutTest" type="border" fittowindow="yes" >
			<cflayoutarea name="left" position="left" collapsible="false" splitter="false" minSize="500" size="500"/>

			<cflayoutarea name="center" position="center" >
				<cflayout type="tab" align="center" name="tabLayout"  tabposition="top"  tabstrip="false">
					<cflayoutarea title="dashboard" closable="false" refreshonactivate="false">
						<div class="container" role="main" style="width:100%;">
							<div class="row">     
								<div class="col-lg-6" style="background-color:red;">col1</div>
								<div class="col-lg-6" style="background-color:blue;">col2</div>
							</div>
						</div>
					</cflayoutarea>
				</cflayout>
			

Open in new window

0
Hi
how do i made

 <asp:button ID="btnsubmit"  class="btn btn-lg btn-block btn-warning"  runat="server" Text="Enviar"  onclick="submit_values" />

Open in new window


respond to an enter button, is a modal multi nav tabs, the  activ, its repond to enter
but the others dont!
0
I had this question after viewing asp.net repeater modal & data command.
0
Im working with ajax toolkit tabs it is working properly but when i am adding bootstrap css files the tabs css  overwrite
Can u Help me to SOlve this problem?
Thanks in advance
0
Hello, with my code below I'm attempting to center my form in a div, when I do so the glyphicons stay left aligned and do not stay with the input control which do center align. How do I get this to work correctly?

 <div class="text-center">
                    <form action="" id="loginForm">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input class="form-control" type="text" name='username' placeholder="username" />
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input class="form-control" type="password" name='password' placeholder="password" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        </div>
                        <input hidden id="hdnUserEnviroment" />
                    </form>
                </div>

Open in new window

0
Hi,

My router not connect to the internet VDSL. DHCP not workint too(the principal problem).  
The command "ip route" not exist!
Configuration:

CISCO881-SEC-K9
ROM: System Bootstrap, Version 12.4(22r)YB5, RELEASE SOFTWARE (fc1)

Running:


Current configuration : 1856 bytes
!
! Last configuration change at 14:20:53 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
version 15.1
no service pad
service timestamps debug datetime msec
service timestamps log datetime msec
no service password-encryption
!
hostname Router
!
boot-start-marker
boot-end-marker
!
!
enable secret 4 tnhtc92DXBhelxjYk8LWJrPV36S2i4ntXrpb4RFmfqY
!
no aaa new-model
!
memory-size iomem 10
crypto pki token default removal timeout 0
!
!
ip source-route
!
!
!
!
ip dhcp pool DSL_DHCP
 import all
 network 10.0.0.0 255.255.255.0
 dns-server 189.40.220.41 8.8.8.8
 default-router 10.0.0.1
!
!
ip cef
ip name-server 189.40.220.41
ip name-server 8.8.8.8
no ipv6 cef
!
!
multilink bundle-name authenticated
license udi pid CISCO881-SEC-K9 sn FTX1648819M
!
!
!
!
!
!
!
!
!
!
!
!
!
interface FastEthernet0
 no ip address
!
interface FastEthernet1
 no ip address
!
interface FastEthernet2
 no ip address
!
interface FastEthernet3
 no ip address
!
interface FastEthernet4
 description DSL interface
 no ip address
 duplex auto
 speed auto
 pppoe-client …
0

Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.