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

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

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
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
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
Technology Partners: We Want Your Opinion!
Technology Partners: 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 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
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
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
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
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
I'm trying to reload ajax data on click event which pops up a modal

implementationlog is a global variable as well as impviewlogjobid

any help much appreciated

$('#implementationLogModal').on('shown.bs.modal', function (e) {

            report = 8;
            var logparam = "{'report':'" + report + "','jobid':'" + impviewlogjobid + "'}";
            var logparameters = JSON.stringify(logparam);

            if ($('#implementationLogTable th:contains(Log)').length == 0) {
                var header = '<thead id="implementationLogTable-Header"><tr><th class="text-center">Log</th><th>Log Date</th></tr></thead>';
                var footer = '<tfoot id="implementationLogTable-Footer"><tr><th class="text-center">Log</th><th>Log Date</th></tr></tfoot>';
                $("#implementationLogTable").append(header);
                $("#implementationLogTable").append(footer);

                implementationLog = $("#implementationLogTable").DataTable({
                    dom: 'lfrtip',
                    oSearch: { "bRegex": false, "bSmart": true },
                    deferRender: true,
                    bFilter: true,
                    bSearchable: true,
                    processing: false,
                    bRetrieve: true,
                    bSortable: true,
                    lengthMenu: [[10], [10]],
                    stripeClasses: [],
                    destory: true,
                    ajax: {
                        "url": 

Open in new window

0
I have a bootstrap Nav component using ReactJS.

At the moment it has a Login and Logout link.

What I need to do is either have one or the other.

So, If I click on the login link, the login link disappears and you can see the Logout link and also the username which is hardcoded.

Then if I click the Logout link the username and Logout is hidden and the Login comes back.

Here is my current component code:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Nav extends Component {
  render() {

    return (
      <div>
        <nav className="navbar navbar-default navbar-fixed-top">
          <div className="container">
            <div className="navbar-header">
              <button
                type="button"
                className="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar">&nbsp;</span>
                <span className="icon-bar">&nbsp;</span>
                <span className="icon-bar">&nbsp;</span>
              </button>
              <a className="navbar-brand" href="">Navbar</a>
            </div>
            <div id="navbar" className="navbar-collapse collapse">
              <ul className="nav navbar-nav">
                <li><a 

Open in new window

0
Look at http://olaffrenecleaningservice.com/

When you shrink the screen down to mobile size you get something like this:

screenshot
I want to put the "free estimate" graphic on its own line and the name of the company on its own line.

I'm seeing some CSS elements that I'm not familiar with ("inherit"). In any case, how can I put these two elements on their own "row" when the screen gets to mobile size?
0
Have a HP Elite 8300 2 Hard drives one is the OS and one the data. when turning on the computer it does find a disk to boot. but by entering to the boot menu [F9] / select OS drive, it boots

Window 10

Please help
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!

Hi

The Video Adverts on pages I visit (always dev and games) have repeatedly told me about visual Composer to help me design my blog. I haven't liked the builders I've tried so far.

It says it can work with existing content. My existing content is okay. Does anyone have experience or an opinion on Composer Pro? It looks good for drag and drop WYSIWYG and can work with existing content. Can I change aspects of the templates? I have a blog with "zero gravity" Theme, like changing the header-banner size, or page width? adverts size/location?
I'd like to make the banner size different and main horizontal menu below it higher and such.


Is visual composer Pro better than Visual Composer bootstrap 3 ?
 
Visual Composer     here

thanks
0
Am am looking for either a library or some code to use that would allow me to add code snippets to my html pages with syntax highlighting.

What options do I have that will work with or on top of Bootstrap 3?
0
I want to reduce the height of input fields. So, I have created a css class

.input-field {
  height: 20px
}

Open in new window


This works fine for text fields and also reduces the height of drop downs. However, in drop down the selection text is cut. How can I ensure that the complete text inside the drop down is visible

Here is the fiddle - https://jsfiddle.net/zvn3wknj/

The selection text 'Approve' and 'Reject' is cut and not displayed correctly.
0
I'm looking for a reliable utility I can create a bootable USB from a ISO I'm currently using windows 7 USB download which does a great job but will only convert one ISO on each USB I would like to be able to boot all versions of windows from one USB (I have them as ISO files)
0
I am creating a form in Bootstrap 3. Would like to have the input fields and label surrounding them to appear smaller than what bootstrap provides by default.

In order to do so, I have created a couple of css classes

.input-field {
  height: 20px
}

.label-size {
  font-size: 10px;
  line-height: 1.2;
}

Open in new window


however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field (<label> tag) appears mis aligned.

Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/

How can I correct this?
0
I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -
Current state
Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target state
My current code is as below


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" 

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.