Bootstrap

990

Solutions

2

Articles & Videos

660

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

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

I have a SharePoint 2016 Server hosted in Azure.  Does anyone have any knowledge or links about adding bootstrap support here?
0
0
I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
UI Issues
1. There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces. Further, Radio buttons in the options section are further to the left as compared to the name and other fields. I am not able to make out why that is the case

2. I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.

This is the fiddle I have created to reproduce  the problem - https://jsfiddle.net/sbcobqz9/3/

Any help is much appreciated.
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
So I use the following to hide a display none div.
How can I "overload" this function in a sense to also swap out the clicked glyph.
make sense ?

var showhide = function(v_eleid){ 
  var o_ele = document.getElementById(v_eleid); 
  if (o_ele){ 
    if (o_ele.style.display == 'none'){ 
      o_ele.style.display = 'block'; 
    } else { 
      o_ele.style.display = 'none'; 
    } 
  } 
}

Open in new window


and in the html <a href="#" onclick="showhide('targetDIVpane');" > click event text link [ bootstrap icon here]</a>

<div id="targetDIVpane" style="display: none;"> content meat goes here </div>
0
I was making up a layout and got stucked while making up this image. What I have done till now is that I have inserted an image onto the background for background but confused how to get that group of profile pictures below it in same style and also show "+8" for more images. I am sure things will be done with js.This is the required layout i needed  Any help would be appreciated.
0
I am attempting to apply form validation using bootstrap validator plug-in but I don't see results. Here is the code:

<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				

Open in new window

0
I am working up on this layout got it done till this much What I have made till now and have to reach at this placeRequired layout.

I am unable to get that profile picture in hexagonal shape. And secondly to get those tabs in the same style as the required picture. Also that navbar in somewhat different style as mine. Any help would be appreciated.

Here is my Code:
<style type="text/css">
.profile-widget {
  background: url(images/profile-widget-bg.jpg) no-repeat 0 0;
  background: position: cover;
  width: 250px;
  border-radius: 3px;
  padding: 15px;
}
.profile-widget img {
  border: 8px solid white;
  border-radius: 70px;
  float: left;
  width: 150px;
  margin-top: -170px;
}
.profile-widget {
  font-size: 11px;
  font-family: Verdana, Geneva, sans-serif;
  display: inline-block;
  color: #fff;
  margin-left: 350px;
}
.profile-widget:after {
  content: " ";
  display: table;
  clear: both;
}
.tabs{
    margin-left: 20px;
    margin-top: 20px;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-sm-12" style=" margin-left: 100px; margin-top:-20px;">
            <img src="/cabme/2/1.jpg" width="904" height="336" />
                    <nav class="navbar navbar-default" style=" margin-right: 235px">
<div class="tabs">
<a href="">Sarah Cruiz</a>&emsp;&emsp;&emsp;&emsp;
<a href="c">Timeline</a>&emsp;&emsp;&emsp;&emsp;
<a 

Open in new window

0
I was making up a layout and got stucked while making up this image. I am confused how to get that profile picture and user name and other text along with that cover pic onto that rectangle. Any help would be appreciated.wqwqwq.png
0
[Webinar] Learn How Hackers Steal Your Credentials
LVL 8
[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

I don't know what I'm doing wrong here but I expect it's something silly.

I'm using Bootstrap and I cannot get the toggle to work. Button appears but on clicking button inside menu doesn't appears.
<nav class="navbar navbar-default navbar-fixed" data-spy="affix" data-offset-top="20">
  <div class="container-fluid">
  <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <a class="navbar-brand" href="index.php"><b>Title</b></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home"><b>Home</b></a>
      </li>
      <li>
        <a href="#" data-toggle="modal" name="link" data-target="#myLoginModal"><b>Submik</b></a></button>
      </li>
      <li>
        <a href="#" data-toggle="modal" data-target="#myLoginModal"><b>Sub2</b></a>
      </li>
    </ul>
</div>
</div>
</nav>

Open in new window

0
I need help with the following code:
<section ng-init="getPlanAreas()">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4 class="text-center">Plan Area Details</h4>
    </div>
    <div class="panel-body">
      <div class="col-lg-12">
        <table class="table table-condensed table-bordered">
          <thead>
          <tr>
                <thead style="background-color: #E0E0E0;">
                <th style="padding-left: 15px;">Plan Area</th>
                <th>Total Tasks</th>
                <th class="text-center" ng-repeat="row in monthMaxDays">{{row.name}}</th>
                <th class="text-center" width="60">Total Hours</th>
                </thead>
          </tr>
          </thead>
          <tbody class="summary-body">
          <tr ng-repeat-start="planArea in planAreas">
            <td style="vertical-align: middle;" ng-click="planToggle(planArea);">
              <a href="">
                <i ng-if="planArea.isCollapsed" class="fa fa-plus" aria-hidden="true"></i>
                <i ng-if="!planArea.isCollapsed" class="fa fa-minus" aria-hidden="true"></i>
              </a> {{planArea.name}}
            </td>
            <td align="center">{{planArea.countActivity}}</td>
            <td colspan="12"></td>
            <td class="text-center">{{planArea.totalHours}}</td>
          </tr>
          <tr ng-repeat-end uib-collapse="planArea.isCollapsed">
            <td colspan="15">
              <table class="table 

Open in new window

0
I would like to open webpage that like modal. but it is going to be web link but the bootstrap. Basically, open webpage (http://www.google.com) and grey out the background.
0
I have two distinct modules in an Angular app, a parent and a child. They both also have distinct default routing HTML pages. The Parent router has one basic router-outlet setup. However for the Child default route, I have a bootstrap side menu and another router-outlet.

When I go to the Child Module section, the side menu is appearing, however it looks like the Parent router-outlet is being utilized. I've searched for several hours for a resolution to this issue, but cannot find one. Each module (Parent and Child) has their own routing files and modules. And each module file has a distinct reference to a specific HTML initial routing page.

I'm sure this is something simple and stupid (which these things usually are), but any help would be appreciated. The angular.io documentation is so bad that finding anything that falls outside the realm of the 'Hero' demo is a waste of time.

Thanks!
0
Hi,

I have a site with 2 navbars:
On loading the page you only see the first navbar (.first).
The first navbar should go away when the user scrolls down and a second navbar (.navbar) should appear and remain fixed at the top.  
This part works perfectly: http://jsfiddle.net/044b4sjs/31/

What I can't manage to do is the following:
On screens smaller than 768 pixels (tablets/mobile) I would like to ONLY show the second fixed navbar and never the first navbar with its scroll effect.  Only the second navbar should be visible on load and when scrolling.

In other words I would like to imitate the behaviour of this site: https://blog.leevia.com/  When you scroll down the navbar changes.  When you scroll back to the top the first big navigation bar appears.  On smaller screens you only see the second navbar.

Please let me know.

Regards,
Laurent
0
HTML
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Example</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> 
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
	</head>
	<style type="text/css">
		.table {
			margin: 0 auto;
			width: 50%;
			/*opacity: ;*/
		}
	</style>
</head>
<body>
	<form class="form-horizontal" name="form" role="form" method="post" action="" onclick="validator()">
	<center>
	<table class="table">
		<thead>
			<tr>
				<th>Enter Field Name<span class="label label"> <td><input id="new-state" type="text" placeholder="Field Name "/>
						</td></span></th>
				<td><button type="button" id="btn-add-state">ADD</button></td></tr>
			<tr>
				<th>Select Field Name <span class="label label"> <td>
							<select id="state" class="selectpicker" type="text" 

Open in new window

0
I am trying to convert an html file to a pdf document that will ultimately be emailed to several parties.  I am using phantomjs to render the dynamic html document to '/dev/stdout' to ultimately get attached to an email that will be sent out to multiple individuals.  The code involved in this scenario is outlined below:

//This is the capture.js file
var webPage = require('webpage');
var system = require('system');
var args = system.args;
var page = webPage.create();

if (args.length === 1) {
  phantom.exit(0);
} else {
	page.viewportSize = { width: 600, height: 600 };
	page.paperSize = { format: 'Letter', orientation: 'portrait', margin: '1cm' };
	page.open("http://localhost:3000/salesorder/" + args[1], function start(status) {
	  if (status === 'fail'){
		  phantom.exit(1);
		  return;
	  }
		
	  page.render('/dev/stdout', { format: 'pdf' });
	  phantom.exit();
	  return;
	});
}

Open in new window


//here is the code that reads '/dev/stdout, to retrieve the generated pdf'
function(resolve, reject) {
            	var childArgs = [
            		  path.join(__dirname, '../phantomservice/capture.js'),
            		  id
            		];

          		childProcess.execFile(phantomjs.path, childArgs, {maxBuffer: 1000*1024}, function(err, stdout, stderr) {
          			if (err){
          				reject(err);
          			}
          			
          			resolve(stdout);
          		});
            }

Open in new window


var mailOptions = {
		    from: fromaddress, // sender address
		    to: toaddresslist, // list of receivers
		    subject: subject, // Subject line
		    html: text
		};
		
		if (attachments){
			mailOptions.attachments = [
		        {   // binary buffer as an attachment
		            filename: 'invoice.pdf',
		            content: new Buffer(attachments),
		            contentType: 'application/pdf',
		            encoding: 'base64'
		        }
		    ];
		}

Open in new window


Here are the issues I am having:

1) When I send the file to stdout, I am getting a three page blank document, what could be causing this to happen and how can I fix it?
2) As an experiment, I wrote the file to a pdf file and reviewed the file.  In this case I got back the document, but I did not see the page populated with data from the database; the population occurs using jquery.
3) I am using bootstrap, and in the case where I am printing to a file; the formatting is way out of whack, it is treating the document as if it belongs on a tablet or phone because it appears to stack the document items as opposed to making them appear as they are on the webpage.  Wht can be done to fix this?  

This is a node.js app using bootstrap and currently running on my local mac os x laptop.  Any help would be greatly appreciated.
0
I am using Bootstrap and am looking for the best way to accomplish a design where I have three images that I want to appear:

  • As Three Across on a Wide Desktop Screen
  • As Two Across on a medium screen with the third centered below.
  • Stacked on a small screen.

I have attached an image that shows what I'm looking for.

I know how to get it to do three across for big and stacked for small, but I'm not sure how to design this so that it switches to Two and then One below for the medium.

A simple example would be helpful. Thanks.
bootstrap_example.png
0
Hi i need help,I've been trying to make double bootstrap menus like on the images below.

When the user is on the top of the page, the menu is full size:
on topWhen the user scrolls down, it should shrink:
when scroll
0
Free Tool: SSL Checker
LVL 8
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I am referring your  code i.e http://www.marcorpsa.com/ee/t1161.html but it's not working for me means not adding into drop-down please help me .... what should I do
0
We have a test site (sudsnax.com - pw: ababs) and a live site: absoluteantibody.com .

Our latest update from the test site was to add a nested search feature, returning child posts as expandable using bootstrap accordions.
(do a search for 'ebola' in the top search box, and then click 'View Formats' in the results for an example). You will see it works fine on both sites.

However...

When we implemented this on the live site, it broke the homepage slider.  Hence it is currently turned off on the live site. But works fine on the Test Site.

Another example of broken code, is the pricing table. Half way down the page, the test site shows it as it should be, with prices tabbed per currency. But the live site shows each in different tables.

Using the browser's dev tools, you'll see there are errors caused on the live site:
Uncaught ReferenceError: jQuery is not defined

However, the Wordpress plugins and their versions are exactly the same on the live site and the test site. So too are the themes. We are at a loss to understand what could be causing this conflict on the live site when the test site works fine. They are on different hosts.

This is an …
0
I am using http://formvalidation.io/ to validate a form.

I want the error message to display on the right hand side of the input field as explained in the link http://formvalidation.io/examples/showing-message-custom-area/

Event though I copied the exact code, my error messages are displayed below the input field. (see attachment)

Any help is appreciated.

My Code

<!DOCTYPE html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Boostrap Validator</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>  
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>

        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
        
            <!-- Include Bootstrap Datepicker -->
            <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
            <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
            
            <script …
0
I had this question after viewing Yet more SharePoint App with Angular and Bootstrap.

I cannot seem to get the list item delete REST call to work.  See App.js the deleteArtist method.



Here are the pieces:

App.js
/// <reference path="angular.js" />
/// <reference path="angular-route.js" />

var app = angular.module('artistApp', ['ngRoute', 'angularUtils.directives.dirPagination']).config(function ($routeProvider) {
    $routeProvider.when('/artists', {
        templateUrl: 'views/view-list.html',
        controller: 'listController'
    }).when('/artists/add', {
        templateUrl: 'views/view-detail.html',
        controller: 'addController'
    }).when('/artists/:index', {
        templateUrl: 'views/view-detail.html',
        controller: 'editController'
    }).otherwise({
        redirectTo: '/artists'
    })
});

app.factory('shptService', ['$rootScope', '$http', '$q',
  function ($rootScope, $http, $q) {
      var shptService = {};

      //utility function to get parameter from query string
      shptService.getQueryStringParameter = function (urlParameterKey) {
          var params = document.URL.split('?')[1].split('&');
          var strParams = '';
          for (var i = 0; i < params.length; i = i + 1) {
              var singleParam = params[i].split('=');
              if (singleParam[0] == urlParameterKey)
                  

Open in new window

0
I have inherited a SharePoint 2013 Site with a list that has ratings enabled.  It "used to show" a ratings control with stars where you can rate a list item.

Suddenly,  the stars are gone and have been replaced with a slider control.  I am the only developer on this site, and haven't added a slider control.

The only updates I have made to the site are to use some jQuery to modify some text and button color and to add a tooltip popup that uses jQuery and Bootstrap.

Any suggestions on this would be greatly appreciated.

Thanks.
0
Hello,

I have been following a youtube presentation titled, "Build An HTML5 Template With Bootstrap and SASS"

Here, the author of the presentation, Brad Traversy, establishes a mixin.scss file, which handles vendor prefixes as follows:

@mixin border-radius($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;

Will the above Mixin file method stop working with v4 of bootstrap?

I found the following on the GetBootstrap site.

Autoprefixer required for Less/Sass

Bootstrap uses Autoprefixer to deal with CSS vendor prefixes. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.

At the moment I am using Scoutapp to compile my scss files.

How do I integrate Autoprefixer in the build process?

Thanks!

Neo
0

Bootstrap

990

Solutions

2

Articles & Videos

660

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.