Expiring Today—Celebrate 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

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
On Demand Webinar - Networking for the Cloud Era
LVL 10
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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
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
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
Enroll in September's Course of the Month
LVL 10
Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

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 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
Hi all,
Im using Jquery and Bootstrap.

Very simple test set up. I have a page which opens a remote content modal.

In the modal there is a div I wanted updated depending on whats in the select box. At the moment nothing seems to happen, Im guessing this is to do with the way Im initalizing the Jquery functions (ie. the elements dont exist on the page until the initial modal call). Any ideas how to solve this?



This is the page:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#thisone").replaceWith("Hello world!");
    });
    
    $("#selector" ).change(function() {

if($("#selector").val()=="one") {
	$("#question").load("text1.txt");
} else if($("#selector").val()=="two") {
	$("#question").load("text2.txt");
}


});
});

</script>
</head>
<body>
<a class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal"  href="modal.html">Click to open Modal</a>
   



<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">

Open in new window

0
see1.png
How can I remove that border just for the share? when i hover over it? I dont want a class change I want just for that one, also I have no classes or styles so i think its from bootstrap itself.
0
Not familiar with bootstrap.

See the attached image. How can I make such alignment accordingly?

SnapShot.png
1. Make the text field closer to point #1
2. Make the submit button closer to point #2

<div class="form-group">
                                    <label class="col-sm-4 control-label">Primary Contact Number:</label>

                                    <div class="col-sm-5">
                                        <label class="control-label"><input type="text" class="form-control" id="print_send_mobile" autocomplete="off"  name="print_send_mobile" required>
                                    </div>

                                    <div class="col-sm-3">
                                        <label class="control-label"><input type="submit" class="btn btn-default yellowBg" value="Send Me Passcode">
                                    </div>
                                </div>

Open in new window


Thank you.
0
We did this bootstrap html site back in 2014.  I am not that familiar with bootstrap to try and figure out what happened but today, site is whacked out.  

http://www.wiplastic.com

I am trying to fix it.  Found references to css that was commented out and I removed the comments so now this test page is looking more like the site used to look but there are still problems.

1. Font is HUGE
2. Animation doesn't work
3. Right sidebar is pushed to bottom of page
4. footer messed up


http://www.wiplastic.com/test3.html
0
I have a Single Page App and I want to scroll to another section from a link on my landing page to another section.  What in your opinion is the best way to do that with current technology?  Javascritpt, Jquery, Other??  And how.
0
hi,

Now I am getting ready to install MariaDB (fork of MySQL ) Galera Cluster, what I want to install is the latest edition from Redhat linux repository.

from: https://mariadb.com/kb/en/mariadb/what-is-mariadb-galera-cluster/

the most stable one should be MariaDB 10.2.7 , is that right?

I'd like to list down the steps I will take and please suggest if there are anything missing for version 10.2.7 :

from :https://mariadb.com/kb/en/mariadb/yum/#installing-mariadb-galera-cluster-with-yum , it said:

"Galera Cluster is included in the default MariaDB packages from 10.1, so the instructions in this section are only required for MariaDB 10.0 and MariaDB 5.5."

so I just need to do:

1) sudo yum install MariaDB-server MariaDB-client

this one should not need :
sudo yum install MariaDB-Galera-server MariaDB-client galera

as this is for MariaDB 10.0.x or below, right?

2) when do I need this mariaDB.repo ? when the first time I install MariaDB package ? before  step 1 )  above ?

"# MariaDB 10.2 RedHat repository list - created 2017-08-07 04:53 UTC
# http://downloads.mariadb.org/mariadb/repositories/
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.2/rhel7-ppc64le
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1"

3)
after installation done by step 1) , do this to start the MariaDB cluster DB:

sudo systemctl start mariadb

4) after that, do I need to Importing the MariaDB Signing Key ?

sudo rpm --import …
0
What does it mean to be "Always On"?
LVL 4
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

I've tried a few ideas but nothing is working. Here is what I've got now:

HTML
<div class="form col-lg-10">
                                          <select id="box1" name="contactCombobox" class="combobox">
                                            <option id="label" value="">Select Agent Option</option>
                                            <option value="#">Yes, I'm currently working with an agent.</option>
                                            <option value="#">No, I'm not. Please contact me.</option>
                                            <option value="#">I'm a Real Estate Agent with an interested buyer.</option>
                                          </select>
                                        </div>

Open in new window


CSS
#box1 {
  width: 100%;
  margin:2rem 1rem 2.5rem -2rem;
  padding: .45rem 0 .45rem 0;
  border: 0.06667rem solid rgba(0, 0, 0, 0.2);
  border-radius: none;
  font-family:@font-family-body;
  font-weight:600;
  font-size:@font-size-small;
  color: hsla(182, 100%, 20%, .8);
  letter-spacing: .06667rem;
  line-height: 1.4280;
}

input[id="#box1"]::-moz-focus-inner,
input[id="#box1"]:-moz-focus-focusring {
  outline:none;
  color: transparent !important;
  text-shadow: 0 0 0 #000 !important;
  background-image: none !important;
  border:0;
}

select.form-control:focus,
select.form-control:hover,
select.form-control:active {
  border-color: #85C2EC;
  outline: none;
}

Open in new window

0
Hi all

when ask for password calls a sub modal but block all the page,
please you guys what can i do?
 regards
disable.png
0
Let me preface this by saying this is an intranet site so I can't reference a URL. All I can do is give you screenshots, but hopefully that will be enough for a ninja to look at and go, "Oh, here's what you're missing..."

Take a look at what I've got below:

nice looking logo
The "Southeast Health System" logo in the upper left corner of the screen. The way that it's positioned is perfect. There's only one CSS rule that applies to the image itself and that is:

.topnavbar .navbar-header .brand-logo-collapsed {
  display: block;
  padding: 6px 15px;
}

Now, look what happens when you make the screen smaller:

bogus
The position of the logo has changed. I realize it's an incremental change, but it 's something that caught my eye and I wanted to fix it. Problem is, I have scoured this thing looking for any difference in size or padding and I've come up with nothing. In other words, I don't understand what's changed that would affect the dimension or the placement of the image.

Any ideas?
0
I would like to create a website. I would like to add videos from time to time. Maybe a couple daily or once a day. What would be my best option to do this?

Would I need a SQL? The website would be more of a blog, however, I'd like to make my own if possible.

Something similar to worldstarhiphop.

I was thinking of using Bootstrap 4.
1
I'm googling this term and I'm not coming up with anything that makes sense?

What is "bootstrap-reset. less?"

Thanks!
0
I'm using Bootstrap Select2 (GitHub Link)   When a user searches within the select and there are no results, a message is shown that says "No results found." I'm wanting to add a hyperlink after that text so that it reads "No results found, click here" ("here" will be a hyperlink). I found the function in the select2.js file but have no idea how to edit it so that I can add the hyperlink. Does anyone know how to do that?

Here's the code snippet which is found on line 4517 on the select2.js file
noResults: function () {
      return 'No results found';
    },

Open in new window

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.