Advertise Here

Bootstrap

1K

Solutions

2

Content

i
The collection of articles, videos, and posts on this topic.

680

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.

Share tech news, updates, or what's on your mind.

Sign up to Post

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
0
2 Comments
Ready to get started with anonymous questions?
LVL 9
Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Learn More
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
1 Comment
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
3 Comments
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
10 Comments
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
4 Comments
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
3 Comments
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
1 Comment
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
7 Comments
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
3 Comments
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
2 Comments
Want Experts Exchange at your fingertips?
LVL 9
Want Experts Exchange at your fingertips?

With Experts Exchange’s latest app release, you can now experience our most recent features, updates, and the same community interface while on-the-go. Download our latest app release at the Android or Apple stores today!

Learn More
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
1 Comment
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
3 Comments
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>
                        <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>
                        <div class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        </div>
                        <input hidden id="hdnUserEnviroment" />
                    </form>
                </div>

Open in new window
0
4 Comments
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
28 Comments
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
1 Comment
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
18 Comments
Hi,

My router not connect to the internet VDSL. DHCP not workint too(the principal problem).  
The command "ip route" not exist!
Configuration:

CISCO881-SEC-K9
ROM: System Bootstrap, Version 12.4(22r)YB5, RELEASE SOFTWARE (fc1)

Running:


Current configuration : 1856 bytes
!
! Last configuration change at 14:20:53 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
version 15.1
no service pad
service timestamps debug datetime msec
service timestamps log datetime msec
no service password-encryption
!
hostname Router
!
boot-start-marker
boot-end-marker
!
!
enable secret 4 tnhtc92DXBhelxjYk8LWJrPV36S2i4ntXrpb4RFmfqY
!
no aaa new-model
!
memory-size iomem 10
crypto pki token default removal timeout 0
!
!
ip source-route
!
!
!
!
ip dhcp pool DSL_DHCP
 import all
 network 10.0.0.0 255.255.255.0
 dns-server 189.40.220.41 8.8.8.8
 default-router 10.0.0.1
!
!
ip cef
ip name-server 189.40.220.41
ip name-server 8.8.8.8
no ipv6 cef
!
!
multilink bundle-name authenticated
license udi pid CISCO881-SEC-K9 sn FTX1648819M
!
!
!
!
!
!
!
!
!
!
!
!
!
interface FastEthernet0
 no ip address
!
interface FastEthernet1
 no ip address
!
interface FastEthernet2
 no ip address
!
interface FastEthernet3
 no ip address
!
interface FastEthernet4
 description DSL interface
 no ip address
 duplex auto
 speed auto
 pppoe-client …
0
7 Comments
This is an experiment in a customized bootstrap 4 menu using a flex layout. The reason I'm going this route (or attempting to) is because I want a custom slide-in collapsed menu- not the standard bootstrap layout.

This approach works fine for the menu items except the dropdown element "work" doesn't toggle.  Any thoughts on why would be greatle appreciated.

HTML
 <header class="container-bleed">
        <div class="header-top">
          <nav class="navbar navbar-fixed-top navbar-custom">
              <div class="nav navbar-nav main-nav">
                <div class="nav-item active">
                  <a class="nav-link" href="./index.htm">Home <span class="sr-only">(current)</span></a>
                </div>
                <div class="nav-item">
                  <a class="nav-link" href="./about.htm">About</a>
                </div>
                <div class="nav-item">
                  <a class="nav-link" href="./approach.htm">Approach</a>
                </div>
                <div class="nav-item dropdown">
                  <a class="dropdown-toggle nav-link" href="#" id="work" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
                  <div class="dropdown-menu" aria-labelledby="#work">
                    <a class="dropdown-item" href="./work1.htm">Work 1</a>
                    <a class="dropdown-item" href="./work2.htm">Work 2</a>
                    <a class="dropdown-item" href="./work3.htm">Work

Open in new window

…
0
3 Comments
Experts,

I am new to JS and jQuery. I have learned that you need jQuery in the code below to run a modal button.

For the most part, the below code works. What I am trying to accomplish is when you select the set of three @text modal buttons I would like for the end user to see the recipient field filled with testuser@cbatest.com and message field blank. What ultimately I want is for when the end-user hits submit, it actually sends the email with the above test account to the recpeint field and the message the end-user puts.

Can you show me how this is done?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

<script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  

<style type="text/css">
    * {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom:

Open in new window

…
0
4 Comments
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 4
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Watch The Video
---> Attempting to connect to administrative share '\\IBL1FA03P.idsgrp.mpls.com\admin$' using account 'IDSGRP\BLRADMIN'      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> The 'best-shot' account has now succeeded 3 times and failed 0 times.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> Connected to administrative share on machine IBL1FA03P.idsgrp.mpls.com using account 'IDSGRP\BLRADMIN'      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> Attempting to make IPC connection to share <\\IBL1FA03P.idsgrp.mpls.com\IPC$>      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> Searching for SMSClientInstall.* under '\\IBL1FA03P.idsgrp.mpls.com\admin$\'      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> System OS version string "6.1.7601" converted to 6.10      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Unable to connect to WMI (root\ccm) on remote machine "IBL1FA03P.idsgrp.mpls.com", error = 0x8004100e.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Creating \ VerifyingCopying existence of destination directory \\IBL1FA03P.idsgrp.mpls.com\admin$\ccmsetup.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Copying client files to \\IBL1FA03P.idsgrp.mpls.com\admin$\ccmsetup.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Copying file "C:\Program Files\Microsoft Configuration Manager\bin\I386\ccmsetup.exe" to "ccmsetup.exe"      …
0
30 Comments
Hi,

Using a form in bootstrap to display some information and trying to pretty it up ... my text however is aligning itself too far left of my fields within the form and wondered why that was?

<fieldset disabled>
					<div class="form-group row">
						<div><h5>PartID</h5></div>
						<div class="col-xs-2"><input type="text" id="disabledInput"		class="form-control" 	name="partID"	 			value="<?php echo $row->partID ?>"/></div>
					</div>
					</fieldset>

Open in new window


In my browser it looks like this: -
Screenshot-2017-07-04-07.08.51.png
0
4 Comments
Google use beautiful fonts and colors. Does Google have an option to download and use its fonts and colors on personal websites?
0
2 Comments
I can not understand why the "list-group panel" does not line up with the text on the first row.  I assumed the grid design would be very easy to implement, I am finding it more challenging than I thought it would be.  Any help would be appreciated.

Please reference https://jsfiddle.net/Spleendrivel/h69gtxzy/   (it will take awhile to load because of the js and css bootstrap code included.)

I have tried adjusting the size of the column in line 26 and 56
0
3 Comments
When I use alert in my div's it puts a padding between my rows. How can I make it where it does not put in a padding?

Example below: I want them to stack on top of each other.
<div class="well">
	<div class="row">
		<div class="col-sm-2 alert">&nbsp;</div>
		<div class="col-sm-2 alert alert-warning text-center">
			<b>Incomplete</b>
		</div>
		<div class="col-sm-2 alert alert-info text-center">
			<b>Complete</b>
		</div>
		<div class="col-sm-2 alert alert-success text-center">
			<b>Verified</b>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-2 alert"><span class="pull-right"><b>General</b></span></div>
		<div class="col-sm-2 text-center alert alert-warning"><input type="radio"></div>
		<div class="col-sm-2 text-center alert alert-info"><input type="radio"></div>
		<div class="col-sm-2 text-center alert alert-success"><input type="radio"></div>
	</div>
</div>

Open in new window
0
7 Comments
Oh men,
i put in my page  a carrousel  whit the boostrap stuff referenced like

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
but its desconfiguring my original stlyle sheet
<link rel="stylesheet" href="css/style.css" type="text/css">

how to get only the carrrousel classes or  what can i do?
regards!!
0
5 Comments

Bootstrap

1K

Solutions

2

Content

i
The collection of articles, videos, and posts on this topic.

680

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.

Advertise Here
Advertise Here