Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

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

Sign up to Post

I am using bootstrap on my site and I generally like it a lot but I would like to make some of the objects a little smaller.  Lists, form objects, nav, tables, etc.  

My question is two-fold:
1) Is there a way to do that "across the board" by adjusting a css file associated with my bootstrap?

2) How much can I do with css on an item-by-item basis without "ruining" the mobile friendliness that bootstrap brings.  For instance, if I use class="img-responsive" for an image and then apply style="width:200px;" will that style make the image not adjust it's size based on whether it is on a mobile device or a desktop?

Thank you!
0
Free Tool: IP Lookup
LVL 11
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Hi Experts,

Am developing bootstrap component where it can accept another component as input and show the output in bootstrap modal and i refered https://angular.io/guide/dynamic-component-loader and its not clear for my understanding .Any one has done this before . please let me know

Thanks in Advance Experts
0
i need to save my textarea with its css like heading and bold like that what i need to do i use this bootstrap wysihtml5 editor
0
Hi everybody.
I've finally decided to face the annoying problem of SEO optimization. I'm using PageSpeed Insights and there are some things which are confusing me a bit.

The one I want ask about here is this: PSI tells me to Eliminate render-blocking JavaScript and CSS in above-the-fold content; I've put anything but bootstrap.min.css in the footer but I still receive the same message. I've put even bootstrap.min.css in the footer and not only I've got a horrible effect loading page (it appears without any css attached for a fraction of second) but the message is still here.

They suggest to optimize CSS delivery. If I understand correctly, I should have to extract from bootstrap the essential rule to give my page a decent aspect and the using the suggested javascript (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) function to defer the loading of the rest of the css. Is this correct?

Thank you
0
Hi there,

From the page below:

https://getbootstrap.com/docs/4.0/components/modal/

I am able to built a modal successfully.  The problem is that I would like the "modal box" to appear (say) 5 centimeters below the place it automatically appears, simply because the upper fixed panel (shown in yellow in the figure attached) "hides" part of the modal box.

What should I include (I guess) here:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
                         ---
    </div>
  </div>
</div>

so that I will have the full modal box shown?

Thanks!
fskilnik.
30Nov17_ModalProblem.gif
0
Hello

I would like to open bootstrap modal window from URL that is belongs to another page or form. Please assist on this.

Earlier i had all the things in one page and that is messing with my current events of the form and all.

Please assist me on how to call modal window which is there in another file or URL or page.

OR

Is there any other way where I can open popup window/modal window ( Responsive)  to open page for user where they can enter the details ?

Thanks
0
I am opening bootstrap modal window there in validation I am calling JS validation plugin to make validation but I am getting below error:

cannot read property 'addMethod' of undefined. I am having below source defined in page header.

Below is js source of the code
function submitContactForm() {
$.validator.addMethod("loginRegex", function(value, element) {
        return this.optional(element) || /^[a-z0-9]+$/i.test(value);
    }, "Username must contain only letters, numbers, or dashes.");
....

Source of the page.
<link rel="stylesheet" href="/myfolder/Mysite/bootstrap/css/bootstrap.min.css" />
<!--<link rel="stylesheet" href="/myfolder/Mysite/bootstrap/css/bootstrap.css" />-->
<link rel="stylesheet" href="/myfolder/Mysite/css/style.css" />
<link rel="stylesheet" href="/myfolder/Mysite/font-awesome/css/font-awesome.min.css" />
<script src="/myfolder/Mysite/js/jquery-1.9.1.js"></script>
<script src="/myfolder/Mysite/js/jquery.validate.js"></script>
<script src="/myfolder/Mysite/js/jquery.blink.js"></script>
<script src="/myfolder/Mysite/js/jquery.formatCurrency-1.4.0.min.js"></script>
<script src="/myfolder/Mysite/js/jqClock.min.js"></script>
<script src="/myfolder/Mysite/js/freeAPI.js"></script>
<script src="/myfolder/Mysite/js/jquery.keyboard.min.js"></script>
<!--<link rel="stylesheet" href="/myfolder/Mysite/css/style.css" />-->
<link rel="stylesheet" href="/myfolder/Mysite/colorbox.css" />
<link rel="stylesheet" …
0
I have just purchased a used cisco 1941 router. I have tried several key combinations while I am connected through putty console. I have tried ctrl + shift + x + 6 and ctrl + pause/insert and ctrl + shift. I rebooted the router while still being connected to the console/session and keep getting the  below screen.

System Bootstrap, Version 15.0(1r)M16, RELEASE SOFTWARE (fc1)
Technical Support: http://www.cisco.com/techsupport
Copyright (c) 2012 by cisco Systems, Inc.

Total memory size = 512 MB - On-board = 512 MB, DIMM0 = 0 MB
CISCO1941W-A/K9 platform with 524288 Kbytes of main memory
Main memory is configured to 64/-1(On-board/DIMM0) bit mode with ECC disabled


Readonly ROMMON initialized
program load complete, entry point: 0x80803000, size: 0x1b340
program load complete, entry point: 0x80803000, size: 0x1b340


IOS Image Load Test
___________________
Digitally Signed Release Software
program load complete, entry point: 0x81000000, size: 0x41b22a8
Self decompressing the image : #################################################################################################################################################################################################################################################################################################################################################################################################### [OK]

Smart Init is disabled. IOMEM set to: 25

Using iomem percentage: 25
Configured …
0
Hello

I have below bootstrap HTML code which generates Login option and which eventually opens modal dialog window for three options with buttons called registration, login and forgot password, when user clicks on login and if user gets succeed in login I want to remove option called Login and instead I need logout, your previous orders and edit your profile option.

Please help how it can be achieved here below is the code. I can check if user is logged in or not using username field on the form.
if users is logged in it would contain user name else it would contain "Anonymous, in case of logged in user I want aforesaid options. Please assist.

  <li class="dropdown"> 
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
                       <img src="images/user-icon.png" class="right-icon user-icon" style="width:12px"/> <img src="images/arrow-down-icon.png" class="arrow-down-icon right-icon" width="10px"/>
                   </a> 
                    <ul class="dropdown-menu dropdown-user"> 
                      <li><a href="#" data-toggle="modal" data-target="#myModal">
                        Login</a>
                     </li>
                     </ul> 
                   
                 </li> 
              
         <li class="dropdown"> 
                   <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
                       <img src="images/location-icon.png" class="location-icon right-icon" 

Open in new window

0
Hi,
I have a problem with showing print and pdf buttons in DataTables. I am using bootstrap admin template. I found on datatables webpage extensions for print and export but I didn't sure how to use that. If you can help me.
0
Concerto's Cloud Advisory Services
LVL 5
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Hello

I would like to have attached web page layout as attached, can anyone please help me on this ? How I can start with this, this has to be done using HTML5, Jquery and Bootstrap, can any one just give me idea how to start on this?
0
I try to reproduce  this BS 3 design, in Bootstrap 4.

The following Codepen https://codepen.io/dujp/pen/bYLdyX/ is where I arrived (drop down with 2 columns), helping me tutorials on the net.

I have two problems:

  1. This design is not responsive (the two columns of the dropdown should be placed under each other on small screens)
  2. I would like the megamenu to occupy the full width of the navbar, as on the BS3 example, and be responsive
0
Any idea what I am doing wrong to keep this form from correctly applying the "horizontal form" characteristics and why what should be to the right of it is below it?

Thanks in advance!
0
How can I add background color to my inline list group:

<ul class="list-inline">
     <li class="list-inline-item">Item 1</li>
     <li class="list-inline-item">Item 2</li>
</ul>
0
Since I started changing the page structure here (http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=658) my data table does not work.  Also, my inline list is not in line.  Any help resolving these two issues would be much appreciated.
0
I would like to replace this calendar (http://www.gopherstateevents.com/calendar/calendar.asp) with one that is a little more contemporary.  I use classic asp/sql server.  I am using bootstrap. for layout.

Thanks!
0
When should cols use which parameter (xs, sm, md)?

Thank you!!
0
Can someone tell me why this page is so "compressed"?

Thank you!
0
Hello i am new to gulp and i am trying to cache bootstrap css.
Gulp documentation is not very good, so any help would be appreciated !
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 added a Mobirise landing page to me existing site at http://www.gopherstateevents.com/  I want to replicate that nave bar at the top on pages like http://www.gopherstateevents.com/misc/login.asp but I am having a hard time cleaning up my old code (bootstrap, etc.) so that the top nav bar will work.  Any ideas would be much appreciated!
0
I am trying to install the following for a new application:
Angular5
Bootstrap4
Firebase and Firestore
Firebase Hosting (probably)
Firebase Auth

I can get everything installed but there are dependency issues.  I think Node.js 9.0.0 does not work with NPM 5.5.1 and the Angular/cli.  Node.js 9 comes with NPM 5.5.1 so I'm not sure what the problem is.  I tried to update my package.json file with v. 5.5.1 from 5.0.0 but that causes even more issues.  I know this is all new but has anyone found a way to work around it?  Different versions?
0
I am trying to integrate my coldfusion pages into  a 'responsive'  navigational bar (eg bootstrap template from W3schools). Below is the result of my efforts in trying to use one of these templates.   The  page code I created is below and also a link to the server so you can see the result.

The result suggests that the template I am using does not fully support coldfusion OR I am not using the correct approach in building in the coldfusion pointers to the nav template.

I am asking the following questions

-  Am I doing something stupid in the example I have included - if so, can you give me a pointer as to what the solution is
-  What are your recommendations for building a responsive Nav bar which will support coldfusion.


Many thanks,

james





<title>Untitled Document</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>

<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
<nav class="navbar navbar-inverse">
    <div class="container-fluid ">
      <ul class="nav navbar-nav">
        
        <li><a href="#tab2" data-toggle="tab">Programme 

Open in new window

0
I have a bootstrap login popup. Upon login into the system throught the bootstrap popup I need to redirtect the client to either myAccount page or myCart page.

		$('#login-form').bootstrapValidator({
			message: 'This value is required',
			submitButton: '$login-form button[type="submit"]',
			live: 'enabled',
			
        	
        	 feedbackIcons: {
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        },
	        
	        fields: {

            username: {
            	group: 'col-sm-2',
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 2,
                        max: 30,
                        message: 'The username must be more than 2 and less than 30 characters long'
                    }
                   
                }
            },

            loginPassword: {
            	group: 'col-sm-2',
                validators: {
                    notEmpty: {
                        message: 'The password is required and can\'t be empty'
                    }
                   
                }
            }
            }
        }).on('success.form.bv', function(e) {
     // alert(100)
        // Prevent form 

Open in new window

0
I would like to change the header on www.gopherstateevents.com that is a little more contemporary with 3-5 pix rotating through periodically.   I am hesitant to change too much because my SEO is great, but the look is not good.

Thanks!
0
When you create a MVC project in Visual Studio 2015, a default _Layout.cshtml page is created. The markup includes the following DIV (I changed the div a bit):
    <div class= "navbar navbar-collapse collapse navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Users", "Users", "Home")</li>
            <li>@Html.ActionLink("General", "General", "Home")</li>
            <li>@Html.ActionLink("Customer Portal", "CustomerPortal", "Home")</li>
        </ul>
    </div>

Open in new window


I want to reduce the height of the div and all its elements to about 25 px,, and move the rest of the body content up to fill in the space created.
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.

Top Experts In
Bootstrap
<
Monthly
>