Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

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

http://dev2.magickitchen.com/#popular  the photo here slides down, revealing text. The designer wants this, a short orange line under the H3 tag:

popular.JPG
I am not sure how to do this... a bottom border? Of course it needs to be responsive. Thanks in advance for your help
0
Free Tool: SSL Checker
LVL 10
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I am trying to display a message in my bootstrap page IF THERE IS AN ERROR IN THE EMAIL FIELDS
I am using :
      <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
            </div>
      </div>
I am able to execute the email.php form correctly if everything is fine, but if there is an error I am using
header("location:javascript://history.go(-1)");
to go to the previous page with the USER INPUT.  I have tried several examples from the web and tutorials, but NONE of them have worked for me but this one (history)
My problem is that since it is history page, NO MESSAGE IS DISPLAYED
My question is HOW CAN I APPEND INFO TO MY FIELDS IN BOOTSTRAP LIKE THE ALERT PREVIOUSLY POSTED
Tnx
contactus.htm
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
Hi, Please see the dark footer at dev.magickitchen.com, user name pepe and pw: BobTheBuilder45!!

I need to add a div in front of the words DON'T MISS OUR LATEST PROMOS AND NEWS, aligned left, with social icons in it.

So it will look like:
Capture.JPG
With the social icons in a separate div from the text.

Here's the social icons code: <a href="http://facebook.com/magickitchen"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp;<a href="http://pinterest.com/magickitchen"><i class="fa fa-pinterest" aria-hidden="true"></i></a>&nbsp;&nbsp;<a href="http://twitter.com/magickitchen"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp;

With or without the non-breaking spaces, I just need a way to create that extra div and can't figure that part out. Thanks.
0
I am trying to get the add button to enable if I select a valid file otherwise disable it. Also i'm trying to show messages if an invalid file is selected. The code below doesn't not seem to generate the desired result:

<form name="myForm">
<div class="modal-content">
	<div class="modal-header">
		<h4 class="modal-title">Add Image</h4>
	</div>
	<div class="modal-body">
		<!-- <table class="table table-responsive table-hover table-condensed"> -->
		<div class='row'>
			<div class="form-group">
				<div class="col-sm-10">
					<input type="file" class="form-control-file"  
						ng-file-select="onFileSelect($files)" 
						ngf-accept="'.jpg,.png'" 
						ngf-pattern="'.jpg,.png'" 
						ngf-max-size="'500KB'"	
						name="img" id="img" ng-model="product.filename" required>
					<div ng-messages="myForm.img.$error && myForm.img.$touched" ng-show="myForm.img.$dirty" style="color:red">
						<div ng-message="maxSize"><p>Image is to large, it must be smaller than 10 Mb</p></div>
						<!-- <div ng-message="minSize"><p>Image is to small, it must be bigger than 1 Mb</p></div> -->
						<div ng-message="accept"><p>File must be an image: (png, tiff, jpeg)</p></div>
						<p ng-message="required">Providing a filename is mandatory.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
	    <button type="button" class="btn btn-secondary" ng-click="addImage()" data-dismiss="modal" ng-disabled="myForm.$invalid">Add</button>
        <button type="button" 

Open in new window

0
Hello,

This is a navigation menu from https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>

Open in new window


I find that sometimes, for the 'page1' link, when I press the down caret button, the menu doesn't drop down; instead the '#' sign gets added to the end of the URL in the address bar.

Any way around this? Why does it happen only sometimes? I found that by omitting the '#", or even the entire 'href="#"', the drop down menu always works.
<a class="dropdown-toggle" data-toggle="dropdown" href="">Page 1

Open in new window


Shall I go with the above route, deleting '#', or even the entire 'href="#"'?

Thank you for your help,

Neo
0
This is my first shot with bootstrap 4 for a web site I'm building. I'm running into a brick wall trying to make it work across all the major browsers. I'm still having styling issues in the header section. I could get the sticky footer work in IE with a flexbox workaround but pretty much stuck with the header. Following are my index.html and css files. Can someone point me in the right direction?

index.html

***************************************************************************
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Book Info</title>

    <!-- Bootstrap core CSS -->
    <link href="externallibs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">-->

    <!-- Custom styles for this template -->
    <link href="css/logo-nav.css" rel="stylesheet">

  </head>

  <body class="d-flex flex-column" style="display: flex; flex-direction: column; height: 100vh;">

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
			<div class="col-md-2 sidebar">
				<a class="navbar-brand" href="#">
					<img src="./logos/bn.png" class="img-fluid" width="220" height="50" alt="">
				</a>
			</div>

              <button class="navbar-toggler" 

Open in new window

0
Here's a screenshot of what I'm messing with:

Bootstrap screenshot
The table that's driving me nuts is the one where you see "status, incentive, details, reward." I can't get it to span 100% of the container's width.

Here's the twig file:

<div class="row">
	{#<div class="col s12">
        <h1 class="hdr-widget theme-color-1">{{ ppwProperties.title }}</h1>
    </div>#}

    {% if data.incentives is empty or data.incentives.rewards is empty %}
    <div class="col empty"><p><em>{{ translate('INCENTIVES_NONE_CURRENTLY_AVAILABLE') }}</em></p></div>
    {% else %}

    <div class="row">
        <div class="col s12" style="padding: 0 1.5rem;">
	
		<!-- here's the start of your table -->
		      <div class="table-responsive">
				<table class="table" style="width:100%;">
					<tbody style="overflow-y: scroll; height:235px; width:98%; position: absolute;">
						<tr>
						  <td style="width:25%; text-align:center; margin:0; padding:0;"><div class="hdr-incent theme-color-1-bg">{{ translate('INCENTIVES_STATUS') }}</div></td>
							<td style="width:25%; padding:0; margin:0;"><div class="hdr-incent theme-color-1-bg">{{ translate('INCENTIVES_INCENTIVE') }}</div></td>
							<td style="width:25%; text-align:center; margin:0; padding:0;"><div class="hdr-incent theme-color-1-bg">details</div></td>
							<td style="width:25%; text-align:center; margin:0; padding:0;"><div class="hdr-incent theme-color-1-bg">{{ translate('INCENTIVES_REWARD') }}</div></td>
						</div>
					

Open in new window

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
I am using front page to write my html code for bootstrap, but everytime I use the 'preview', it gives me script errors and the page doesn't shows as it should.  I have to upload it in order to see the result or changes. Is there any way that I can overcome this situation, like another software or download something in able to 'preview it without uploading the page'

Tnx
0
[Webinar] Lessons on Recovering from Petya
LVL 10
[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

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
Hello, this page is the one I'm trying to emulate:
http://fromthefuture.staging.wpengine.com/magickitchen/

and here's the test page: http://dev2.magickitchen.com/  (use mel and mel as user name and pw)

Scroll down to Our Two Main Menus. The <div class="col-xs-12"> is far higher on the good page, as is the row above.

If I highlight them, they look like this, good page at top.

Untitled-2.jpg
0
Can someone tell me why this form does not condense to vertical on a cell phone please?
    <div class="row">
        <div class="col-xs-8">
  	        <form class="form" name="edit_accnt" method="Post" action="profile.asp" onSubmit="return chkFlds();">
            <div class="form-group">
                <label for="screen_name" class="control-label col-xs-2">Screen Name:</label>
                <div class="col-xs-4">
                    <input class="form-control" type="text" name="screen_name" id="screen_name" maxLength="12" value="">
                </div>
                <label for="email" class="control-label col-xs-2">Email:</label>
                <div class="col-xs-4">
                    <input class="form-control" type="text" name="email" id="email" maxLength="50" value="bschneider@stjosephwaconia.org">
                </div>
            </div>
            <div class="form-group">
                <label for="cell_phone" class="control-label col-xs-2">Cell Phone:</label>
                <div class="col-xs-4">
                    <input class="form-control" type="text" name="cell_phone" id="cell_phone" maxLength="50" value="6122193926">
                </div>
                <label for="cell_provider" class="control-label col-xs-2">Provider:</label>
                <div class="col-xs-4">
                    <select class="form-control" name="cell_provider" id="cell_provider">
                        <option value="">&nbsp;</option>
                        
   

Open in new window

0
Hi, how can I use a JPG background image in bootstrap to cover the entire page ? none repeat if possible
I had traied to use an image but it DOES NOT cover everything (begins only after the heading)

Plz feel free to use any image for any page, I will adapt to your example

Tnx in advance
0
Hello,
I have a contact page in my landing page which uses some php to check whether what has been submitted into the contact form is what is required. If some fields have not been entered, or entered incorrectly, the php sends out an error message, prompting the user to fill the form as required.

The contact part of the landing page is located at the bottom of the page and in html has it's own section ID. The problem is, if a user presses submit after entering text in the content field (and there is missing / incorrect information), the page refreshes and then goes back to the top of the page. The user then needs to scroll down again to see the contact form (and the associated error message). I would like the page to stay at the same point after the submit screen has been pressed. Is there a way to do this?

The page is located here:
http://www.orangutanenglish.orangojapan.com/index1.php

My code is here:
<?php	

/*
This is how we can write comments in PHP. Below we have a '.' after $error as it tells the code to look out for all errors 
(not just the last one) The break command has to go where it is to work. 
This php script relates to what has been posted in the comments field. 

This relates to the Contact Form.

*/	

if ($_POST['submit']) 
{

	if(!$_POST['name']){
	$error="<br/>Please enter your name"; 
	}
	
	if(!$_POST['email']){
	$error.="<br/>Please enter your email";
	}

	if(!$_POST['message']){
	$error.="<br/>Please enter a message";
	}

	

Open in new window

0
I am trying to learn bootstrap, and I am beginning with the simple steps, and I am having some problems.
I just want to create a link with a button that links to ex. google.com, but when I use this

<input type="button" class="btn btn-info" value="Input Button" onclick="location.href = 'http:\\www.google.com';">

if sends me to :

http://scalpscreen.net/www.google.com

(the domain where I stored the webpage is scalpscreen.net)

I just want a simple hyperlink button

Tnx
0
Below codes are working. but if I put  src="c:\horse.mp3"  or src="c:\\horse.mp3" it is not working. how to fix it?

  <audio id="AudioPlayer" controls="controls">     
                                                                <source src="http://www.w3schools.com/html/horse.mp3" />  
                                                                <!-- fallback if html5 audio controls aren't supported -->
                                                                Browser Doesn't Support
                                                            </audio>

Open in new window

0
Using bootstrap for my single page app to make it responsive.

http://www.utahkidsfoundation.com

I recently added a "quotes" section, but it does not resize like the other portions of the page.  Why?

(larger size okay):
larger


(small size - the quotes section does not shrink or resize; it just gets cut-off):
shrunk down
0
Hi, I'm trying to recreate this table: http://www.magickitchen.com/cart/cgi/nutri_table.cgi?cmd=display_nutri_table&css_id=nutrition-table&sku=97124  we used Footable to get that working. It collapses when it's in a smaller view and you can open things by clicking on the plus sign.

Here's the new page: http://dev2.magickitchen.com/cart/cgi/nutri_table.cgi?cmd=display_nutri_table&css_id=nutrition-table&sku=97124 

On that page, user name:pepe  password:BobTheBuilder45!!

I've included the links to footable css and javascript, and checked that those files are there, but I am stuck, it's just not working. Can you help? Thanks.
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!

Take a look at https://pekinhealthfair.ezonlineregistration.net/. I want to get rid of the white space between the two bottom buttons like what you see here...

screenshot
I tried the offset option like this:

<div class="row">
							<div class="col-md-3 offset-md-3" style="margin:auto; text-align:center"><br>
								<div style="background-color:{{body_bottom}}; border-radius:10px; margin:auto; width:150px; padding:5px; height:30px; color:#ffffff;">
									<div style="border-radius:10px; margin:auto; text-align:center; border:1px solid #cccccc; width:140px; height:20px; padding-top:1px;">
										<a href="https://pekinhealthfair_form.ezonlineregistration.net?empID=7657" style="color:#ffffff; text-decoration:none; cursor:pointer;">Tazewell County</a>
									</div>
								</div>
							</div>
							<div class="col-md-6" style="margin:auto; text-align:center"><br>
								<div style="background-color:{{body_bottom}}; border-radius:10px; margin:auto; width:120px; padding:5px; height:30px; color:#ffffff;">
									<div style="border-radius:10px; margin:auto; text-align:center; border:1px solid #cccccc; width:110px; height:20px; padding-top:1px;">
										<a href="https://pekinhealthfair_form.ezonlineregistration.net?empID=7655" style="color:#ffffff; text-decoration:none; cursor:pointer;">City of Pekin</a>
									</div>
								</div>
							</div>
						</div>

Open in new window


But it didn't work. By that I mean, it looked like this:

better screenshot
The amount of white space between the two buttons is much improved, but now it's not centered within the row.

What am I missing?
0
Can someone tell my what I need to do to make this navbar mobile responsive please?

<div class="row">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Performance Tracker</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="perf_trkr.asp">Home</a></li>
            <li><a href="profile.asp">Profile</a></li>
            <li><a href="results_notif.asp">Results Notification</a></li>
            <li><a href="create_pack.asp">Create A Pack</a></li>
            <li><a href="my_packs.asp">My Packs</a></li>
            <li><a href="perf_lists.asp">Performance Lists</a></li>
            <li><a href="perf_graphs.asp">Graphs</a></li>
            <li><a href="http://www.my-etraxc.com/" onclick="openThis(this.href,1024,760);return false;">My-eTRaXC</a></li>
            <li><a href="login.asp">Sign Out</a></li>
        </ul>
      </div>
    </nav>
</div>

Open in new window


Thank you!
0
http://halohimalaya.com is using bootstrap. My question is: is it using anything else which will conflict with it, as i don't want the pages to become difficult to control at different media sizes?
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
Hi all,

I've pasted an example carousel from bootstrap's page of examples. I'm using bootstrap v4 and the carousel text I copied was also from bootstrap 4. However, when I view the carousel, the arrow indicators don't seem to be displayed. I assume the following part of the code relates to them:

<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>

Open in new window


I have not specified these classes in my css styles file but assumed as they are part of the v4 framework I wouldn't need to.

The entire code is here:

<!DOCTYPE html><!-- Orangutan Japan - Orangutan English Site -->
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	
    <!-- Bootstrap CSS __ these are needed to get the bootstrap framework to appear-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 

Open in new window

0
Hi all,
I have a modal window:
http://dnx.org/jq/

However, when the modal is opened, and then closed, and then opened again the old content appears. Whats the best way to force the modal refresh each time the open link is clicked?
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.