Advertise Here

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

Bootstrap

Solutions

Content

701

Contributors

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.

bootstrap and php contact form

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

5 Comments

LVL 2

Question by

Aamir Sarfaraz

2d ago

Bootstrap addNode

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 Comments

Question by

mel200

3d agoSolved

CSS Bootstrap Div question

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:

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>  <a href="http://pinterest.com/magickitchen"><i class="fa fa-pinterest" aria-hidden="true"></i></a>  <a href="http://twitter.com/magickitchen"><i class="fa fa-twitter" aria-hidden="true"></i></a>  

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.

4 Comments

Question by

eugene007

5d ago

input type="file" validation

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

…

1 Comment

Question by

netplus21

7d ago

bootstrap navigation menu

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

3 Comments

LVL 1

Question by

roger_v

2017-09-13

Unable to make bootstrap 4 page work responsively

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

…

3 Comments

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

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

…

Bootstrap

1 Comment

Question by

krishna kishore

2017-09-11

JQUERY chart

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

7 Comments

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

10 Comments

[Webinar] Lessons on Recovering from Petya

LVL 10

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

…

1 Comment

Question by

mel200

2017-09-05Solved

div spacing different on two pages

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.

3 Comments

Question by

Bob Schneider

2017-09-04

Form isn't Mobile Friendly

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

…

1 Comment

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

1 Comment

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

…

17 Comments

Question by

crescue

2017-09-01Solved

create a link with bootsrap

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

Bootstrap

3 Comments

LVL 1

Question by

ITsolutionWizard

2017-08-30Solved

mp3 html5

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

21 Comments

LVL 5

Question by

Tom Knowlton

2017-08-30Solved

bootstrap - one section of the page is not responsive

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):

(small size - the quotes section does not shrink or resize; it just gets cut-off):

4 Comments

Question by

mel200

2017-08-29Solved

Table not collapsing

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.

8 Comments

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...

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:

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?

Bootstrap

4 Comments

Question by

Bob Schneider

2017-08-26Solved

Bootstrap NavBar Doesn't Condense

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!

2 Comments

LVL 86

Question by

CEHJ

2017-08-25Solved

Bootstrap under the heel?

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?

9 Comments

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!

3 Comments

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

…

3 Comments

Question by

Stephen Forlance

2017-08-21Solved

Force modal refresh

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?

2 Comments

First
Prev
1
2
3
4
5
6
7
Next
Last

Bootstrap

Solutions

Content

701

Contributors

COURSE of the MONTH

Bootstrap

Related Topics

Bootstrap

Related Topics