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

I just read the Bootstrap 4 is finally in beta. Is it okay to use Bootstrap 4 in productions?

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.


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 : , 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
name = MariaDB
baseurl =

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 …
I've tried a few ideas but nothing is working. Here is what I've got now:

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

Open in new window

#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;
  color: hsla(182, 100%, 20%, .8);
  letter-spacing: .06667rem;
  line-height: 1.4280;

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

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

Open in new window

Hi all

when ask for password calls a sub modal but block all the page,
please you guys what can i do?
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:

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?
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.
I'm googling this term and I'm not coming up with anything that makes sense?

What is "bootstrap-reset. less?"

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

Hi there!

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

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 class="modal-body">
[b]        You have chosen the following "value button":   315_<%= ThisDay(3)%>[/b]
      <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>

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

Free Tool: Subnet Calculator
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

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


Open in new window

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

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

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

Open in new window

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

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 and 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 class="pull-right">
				<input type="button" ng-click="updPermission()" value="Update Permission">  
	<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{{}}">
                            <i class="glyphicon glyphicon-collapse-down"></i>{{}}
                  <div id="collapseModule{{}}" class="panel-collapse in">
					<div class="panel-body">
						<table class="moduleGrid table-striped table-bordered table-hover table-condensed">
							  <!-- Now just ng-repeat the rows -->
							  <tr ng-repeat="perm in value.permission">

Open in new window

Using the documentation found here 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.
I've got a media query that looks like this:

@media (min-width: 768px) and (max-width: 991px) {
            .watermark {


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?
Refrencing form wizard here

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

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

$breakpoints: $grid-breakpoints;      //include-media expects $breakpoints

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

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

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

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:

<title>NEX Transport Employees - EZOnlineRegistration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
	html, body {
		margin: 0px;
		font: 14px sans-serif;
		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 {
		justify-content: center;
		align-items: center;
		flex-flow:column wrap;
	.content {
		border:1px solid #7b5b01;
		-moz-border-radius: 14px 14px 14px 14px; 
		border-radius: 14px 14px 14px 14px; 
		box-shadow:7px 7px 10px #7b5b01;

Open in new window

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.

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!
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.
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 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 class="col-md-4" style="background-color:#000000;">asdf</div><!--this should be displayed alongside the other cell and instead it's underneath-->

The two columns should be displayed alongside one another …
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 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 class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        <input hidden id="hdnUserEnviroment" />

Open in new window



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.