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

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
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
Hi there!

I have created a "Live modal" as explained in the following link:

http://getbootstrap.com/javascript/#modals

I do not have only one button, though. There are many, everyone with exactly the structure below:
<button class="btn btn-deluge btn-sm" data-toggle="modal" data-target="#myModal" type="submit" name="hiddHorarioID" id="hiddHorario31"  value="315_<%= ThisDay(3)%>">Qua, 7h30min</button>

Open in new window


where the id and value properties have, of course, different values in each button.

Question: how should I change the "modal receptacle" (below), so that the text in bold comes correctly from the button chosen?

-----------------------
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
[b]        You have chosen the following "value button":   315_<%= ThisDay(3)%>[/b]
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

-----------------------

Of course what I need is not EXACTLY that, but if you tell me how to solve this, my problem is solved.

Explaining a bit better, I hope: I have many buttons, just one "modal receptacle". I need the "modal receptacle" to know from which of the buttons it was called, so that I can use the "value" property of THAT button to put messages inside the "modal receptacle" body...

Thanks!
fskilnik.
0
I am trying to validate 3 forms within bootstrap modal

If I am validation 1 form everything is fine when I add the validation for second for I am getting an error message

jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at fa (jquery.min.js:2)
    at Function.fa.matches (jquery.min.js:2)
    at Function.n.filter (jquery.min.js:2)
    at z (jquery.min.js:2)
    at n.fn.init.is (jquery.min.js:2)
    at b._getMessageContainer (bootstrapValidator.min.js:11)
    at b._getMessageContainer (bootstrapValidator.min.js:11)
    at b._getMessageContainer (bootstrapValidator.min.js:11)
    at b._getMessageContainer (bootstrapValidator.min.js:11)


Open in new window


<div id="myModal" class="modal fade" role="dialog">
			<div class="modal-dialog" role="document">
			    <!-- Modal content-->
			    <div class="modal-content">
			    	<div class="modal-header">
			        	<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h2 class="modal-title">Account Login</h2>
			    	</div>
				<div id="div-forms">
					<form data-toggle="validator" role="form" id="login-form"  method="POST">
					<div class="modal-body">

			        	<h3>Welcome to I Drive Smart. Please log-in to access your account.</h3>
			        	<div class="alert alert-danger" role="alert" style="display: none;">
  							Your user name OR password does not match our record. Please re-enter user name and password.
						</div>

	

Open in new window

0
Enroll in August's Course of the Month
LVL 9
Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Hello,
Im just trying to get to grips with using Modals and Bootstrap, can anyone look at :

http://dnx.org/eno/

And tell me why the button launches a modal, but the content is not replace with ajax content (from content.html )?


Thanks,
0
I have the following angular code:

var myApp = angular.module('myApp', []);

myApp.controller('myAppController', ['$scope', function ($scope) {

    $scope.displayData = [{
        column1: 'row1 column1',
        column2: 'row1 column2',
        column3: 'row1 column3',
        column4: 'row1 column4'
    },
    {
        column1: 'row2 column1',
        column2: 'row2 column2',
        column3: 'row2 column3',
        column4: 'row2 column4'
    },
    {
        column1: 'row3 column1',
        column2: 'row3 column2',
        column3: 'row3 column3',
        column4: 'row3 column4'
    },
    {
        column1: 'row4 column1',
        column2: 'row4 column2',
        column3: 'row4 column3',
        column4: 'row4 column4'
    }

    ];

}]);

Open in new window


With the following html view:
<div ng-app="myApp">
    <div ng-controller="myAppController">
        <div class="row" style="background-color: gray; color: white;">
            <div class="row" style="background-color: gray; color: white;">
                <div class="col-xs-4 col-md-4">Header 1</div>
                <div class="col-xs-2 col-md-2">Header 2</div>
                <div class="col-xs-1 col-md-1">Header 3</div>
                <div class="col-xs-3 col-md-3">Header 4</div>
                <div class="col-xs-1 col-md-1"></div>
                <div class="col-xs-1 col-md-1"></div>
            </div>
        </div>
        <div ng-repeat="dataItem in displayData">
            <div class="row">
                <div class="col-xs-4 col-md-4">{{ dataItem.column1 }}</div>
                <div class="col-xs-2 col-md-2">{{ dataItem.column2 }}</div>
                <div class="col-xs-1 col-md-1">{{ dataItem.column3 }}</div>
                <div class="col-xs-3 col-md-3">{{ dataItem.column4 }}</div>
                <div class="col-xs-1 col-md-1">update</div>
                <div class="col-xs-1 col-md-1">delete</div>
            </div>
        </div>
    </div>
</div>

Open in new window


Which produces the following result:
RegularView.png
But when I make the browser smaller or change the device view, the column header and data seem to overlap:
Problem1.png
Is there an elegant way to resolve this issue?


Thanks.
0
In each bootstrap collapse expand panel I have a table with two columns and multiple rows created. Each row has a checkbox.

Now when I press Update Permission button, I intend to send two values to my angularjs controller namely perm.id and value.id for each row to process.

<div class="col-xs-12">

	<div class="row">
		<div class="col-md-12 margin-tb">
			<div class="pull-left">
				<h1>Listing Module</h1>
			</div>
			<div class="pull-right">
				<input type="button" ng-click="updPermission()" value="Update Permission">  
			</div>
		</div>
	</div>
		
	<div ng-repeat="value in module">
         <div class="panel-group">
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
						 <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseModule{{value.id}}">
                            <i class="glyphicon glyphicon-collapse-down"></i>{{value.name}}
						 </a>
                    </h4>
                  </div>
                  <div id="collapseModule{{value.id}}" class="panel-collapse in">
					<div class="panel-body">
						
						<table class="moduleGrid table-striped table-bordered table-hover table-condensed">
						   <thead>
							  <tr>
								 <th>Permission</th>
								 <th>Status</th>
							  </tr>
						   </thead>
						   <tbody>
							  <!-- Now just ng-repeat the rows -->
							  <tr ng-repeat="perm in value.permission">
								 <td>
								

Open in new window

0
Using the documentation found here http://vinceg.github.io/twitter-bootstrap-wizard/ I have created a tabbed form wizard with Parsley validation.
JSFiddle here
I have the form validating perfectly when using the top tabs to move between tab-panes however I am having trouble with the "next" and "previous" buttons.
On initial click of the "Next" button on the first tab-pane the validation seems to work fine however this is where the trouble begins. The "next" button then renders itself "disabled" and does not work any more.
From what I can read the trouble begins on line 2 of my js. Line 3 (commented out) is my attempt at a fix but witht success.
Experts required.
N
0
I've got a media query that looks like this:

@media (min-width: 768px) and (max-width: 991px) {
            .watermark {
            position:absolute;
            margin-left:45%;
            margin-top:28px;
      }

}

As long as we're at 991 px or something within 50 px, it's positioned in the lower right hand corner exactly where I want it to be. But as we get closer to to 768px, it starts to drift closer to the center and it begins to look more and more like a mistake.

Is there a better way to ensure that the watermark stays fixed in the right hand corner? Or, do I have to create additional media queries to accommodate the dimensions within the range of 768 and 991?
0
Refrencing form wizard here https://bootsnipp.com/snippets/featured/form-wizard-using-tabs

I'd like to modify the js in this wizard to add the class "complete" where the active of disabled currently reside.
Essentially an "li" tag will either contain disabled, active or complete.
Thanks in advance..
N
0
I'm trying a new installation of include-media (on Mac) and I'm getting the following error:
Error: Undefined mixin 'media'.
        on line 749 of /Volumes/current/Current/Projects/h5bp-bootstrap4-master/_scss/_project.scss, in `media'
        from line 749 of /Volumes/current/Current/Projects/h5bp-bootstrap4-master/_scss/_project.scss
        from line 60 of /Volumes/current/Current/Projects/h5bp-bootstrap4-master/_scss/__main.scss
  Use --trace for backtrace.

_include-media.scss is installed in _scss directory and seems good.

bs4 breakpoint Sass map has been edited to include: $breakpoints: $grid-breakpoints;

[
code]
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
)
!default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

$breakpoints: $grid-breakpoints;      //include-media expects $breakpoints
[/code]

Usage is:
/* Extra Small Devices, Phones */
@include media(">xs") {                                   //This is Line 749 which returns the error
   .navbar-header-iPhone {
      border-top: solid .2rem red;
    }
}

Open in new window

0
Take a look at the screenshot below and notice how the word "hello" is hanging off to the right hand side...

screenshot
It only occurs in Landscape mode. Otherwise, it's centered beneath the rest of the content like you would expect of a footer.

It will look OK when I just have the word "hello" in place. As soon as introduce a line break, it gets kicked off to the side.

Why? And how can I fix it?

Here's my code:

<html>
<head>
<title>NEX Transport Employees - EZOnlineRegistration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
	html, body {
		margin: 0px;
		padding:0px;
		font: 14px sans-serif;
		height:100%;
		background:#eaad02;
		background: -webkit-linear-gradient(#eaad02, #ffe39a); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#eaad02, #ffe39a); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#eaad02, #ffe39a); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#eaad02, #ffe39a);
		min-height: 100%;  /* Fallback for vh unit */
		min-height: 100vh; 
	}

	h4 {
		margin: 10px 0;
		color: #1823a0;
	}
	
	.container {
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-flow:column wrap;
		flex-direction:column;
	}
	
	.content {
		max-width:625px; 
		border:1px solid #7b5b01;
		-moz-border-radius: 14px 14px 14px 14px; 
		border-radius: 14px 14px 14px 14px; 
		box-shadow:7px 7px 10px #7b5b01;
		display:flex;
		

Open in new window

0
Hi there!

The two pieces below "work together"

<input name="hiddScheduleID" type="radio" id="hiddSchedule21" value="218_<%= ThisDay(2)%>" size="5" />
<button class="btn btn-primary btn-xs" type="submit" onclick="javascript:return checkRadio()">Schedule Date</button>

That means: the user has the possibility to check the radio button and right after that, when he/she presses the button, the "action" related to the "form" considered works as expected.

My will : I would like to leave "just the button", but with the radio-button info "inside it", so that when the user presses the button, everything works the same. In other words, take out the radio button without taking out the info it stores, and put the info "inside" the button...  how should that be done?

P.S.: the javascript is for "are you sure you want to..." stuff.  Therefore this part should be kept intact, of course.

Thanks!
0
Industry Leaders: We Want Your Opinion!
Industry Leaders: 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!

I am using bootstrap to toggle a panel ... it works fine when the div is first loaded (ajax load at form load).  Once I add data to the div, it will no longer collapse.   Worse, none of the other divs will collapse either!  A real issue since there are about 30 divs on this view.

Any guidance appreciated!
0
Is there a way to use AngularJS with Bootstrap 4? I would like to use AngularJS' cards and colors in Bootstrap 4. I don't know if this is possible since I'm not really looking into building an apps.
0
This should be cake and ice cream, but it's not working and I don't know why.

I've got a nested row. Within that row, I've got two columns:

[code]<div class="row orange_row"><br>
                        <div class="col-xs-12" style="margin:auto; float:none; background-color:#ffffff; text-align:center; width:95%; padding:10px;">
                        <b>Welcome to the NEX Transport Journey to Wellness! </b>
                        <br><br>To be eligible for an increased Health Spending Account (HSA) contribute in in 2018 please complete the BASIC requirements and participate in various activities to earn 200 points.
                        <br><br>Ready to get started?
                        <br><br>Click below to get started. Once you take your survey and you will see the BASIC requirements and activities available to get involved in!
                        </div><br>
                        <div class="col-xs-12">
                              <div class="row" style="background-color:blue;"> <!--nested row-->
                                    <div class="col-md-8" style="color:#ffffff; margin-left:10px; margin-right:10px; font-size:9pt; background-color:#cccccc;">
                                    Gold     – Basic Requirements completed plus 200 points earned<br>
                                    Silver    – Basic Requirements Completed; No points earned<br>
                                    Bronze – No Basic Requirements Completed; No points earned
                                    </div>
                                    <div class="col-md-4" style="background-color:#000000;">asdf</div><!--this should be displayed alongside the other cell and instead it's underneath-->
                              </div>
                        </div>
                  </div>{/code]

The two columns should be displayed alongside one another …
0
Client had a Attack since then when turning on PC it start with window automatic repair and from there it goes to the troubleshoot screen.
Please advice
Windows 10
0
Hello all,

I have a form that has three check boxes. I would like to use bootstrap validation for the user to check at least one check box from those three check boxes. I have found solutions that requires you to change the name of the check boxes to the same name. But I want to keep my check boxes just the way they are.

here is the check boxes I am using:

<div class="col-md-5">
 
  <h4>Scope <span class="style1"> *</span></h4>
    <label class="radio-inline" for="scope_fac">
   
      <input name="scope_fac" type="checkbox" id="scope_fac"  value="Y">
      Faculty
    </label>
    <label class="radio-inline" for="scope_staff">
      <input name="scope_staff" type="checkbox" id="scope_staff"  value="Y">
      Staff
    </label>
    <label class="radio-inline" for="scope_stu">
      <input name="scope_stu" type="checkbox" id="scope_stu"  value="Y">
      Students
    </label>
    <label class="radio-inline" for="scope_public">
      <input name="scope_public" type="checkbox" id="scope_public" value="Y">
      Public
    </label>
  </div>

The name of my form is "form1". So again all I want is to use bootstrap code to make the user to at least check on of the boxes.

My script begin and end is this:

<script type="text/javascript">
$(document).ready(function() {
    $('#form1').bootstrapValidator({
        message: 'This value is not valid',
       
        fields: {



});
</script>
0
I am using a jQuery tabs package (SolidTabs) to present several jQuery/BootStrap (BootGrid) Ajax forms on the same page. iframes are not an option. As its name implies, BootGrid displays a table of records, along with the ability to add a new record or edit an existing one, taking advantage of Ajax, using json and PHP.
I have not wanted to mess with the main js file. I'm thinking I should just be able to change the various HTML id's, and I should be fine. So far, that has not been successful.

My perhaps naive question is - other than using an iframe, is there some way of containing these separate grid forms so that I could use the same id assignments on the same page?
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.