Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

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 my navbar I have 4 buttons. "Home" "About" "Contact" "Products". How do I take these 4 buttons and have them spread out evenly across the line?navbar
0
Hire Technology Freelancers with Gigs
LVL 11
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Head out to http://brucegust.com/adm/bootstrap/sandbox.php

What you're looking at is a scaled down / streamlined version of a mess I'm trying to clean up and I'm stuck.

Bottom line: Despite the fact that you've got more than one "footer" class, I want to dictate the placement of the footer at the very bottom of the page using some inline styling. What's frustrating is that I had this working, but I'm part of a team and I'm thinking someone may have overridden some code, but no matter...

What can I put within the inline CSS that will force that footer to the bottom of the page?
0
Hi,

I have a javascript code for session storage for a modal pop up done according to Bootstrap 4 documentation, but I guess I am missing something, because it is not working
<script>
	   $(document).ready(function() {
	    $(function() {
         if (typeof Storage != "undefined") {
              if (!localStorage.getItem("done")) {
    
                   setTimeout(function(){
                     $('#exModal1').modal('show');
                     }, 2000);
                     setTimeout(function() {
                      $('#exModal1').modal('hide');
                        }, 20000);
    localStorage.setItem("done", true);
  }
  }
});             
  }); 
 
</script>

Open in new window

0
Hi,

I have a page where I need to use this bootstrap stylesheet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

Open in new window


I have also my own stylesheet which is loaded after the boostrap stylesheet.

In my own stylesheet I have set these stylings for links, but the only one that seems to have any effect is the hover. How do I make the other ones overwrite the default bootstrap styling.
    /* unvisited link */
    a:link {
        color: blue;
        text-decoration: none;
    }

    /* visited link */
    a:visited {
        color: blue ;
    }

    /* mouse over link */
    a:hover {
        color: red;
        text-decoration: underline;
    }

    /* selected link */
    a:active {
        color: blue;
        text-decoration: none;
    } 

Open in new window

0
Hi:

I have this Bootstrap question broadening this Bootstrap NavBar.

<head>
  <title>AllOne</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>
<body>
<nav class="navbar navbar-insert">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">AllOne</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Flights</a></li>
      <li><a href="test.html">Hotels</a></li>
      <li><a href="#">Flights</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  <div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>

This is a simple Bootstrap Nav bar which needs to be broadened.

Look forward to your response.

Regards

Sunnybrad
0
We have an system build in Java Web using MVC with views in HTML and database in postgres. The view is made in HTML with bootstrap and uses SQLite and webservices to send the data to the server to save or load data.

The problem we have for the type of system is that the HTML view is slow and consumes many resources, for example:
1 - in the autocomplete has no selection, while they grab the mouse and go it takes it out
2 - the use of keys in fields is not very intuitive and tends to be slow
3- it is slow compared to a desktop application

We would like to pass it to a normal desktop application that does not require so many resources to
Run and do not have the browser dependencies we currently have.

What would be the best way to do it and what could we use?
0
I can't seem to control the height of td and th in my bootstrap table or datatable.  Any help would be much appreciated!

Table:
http://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?sport=Cross-Country

DataTable:
http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=666&race_id=1173

Thank you!
0
I want to modify the padding and spacing of form elements by using an internal style sheet (for now...ultimately I will turn it into an external style sheet).  I can't get it to reduce the padding and spacing of the form elements.  See this page: http://www.gopherstateevents.com/cc_meet/perf_trkr/login.asp

Any help would be much appreciated!
0
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
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
Get expert help—faster!
LVL 11
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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
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
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
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
Receive 1:1 tech help
LVL 11
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

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

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
>