Categorías: Programación Web

Cómo integrar Twitter Bootstrap y Codeigniter

Venimos con una de nuestras guías y tutoriales sobre Codeigniter vamos a integrar Twitter Bootstrap en Codeigniter de la forma más sencilla y rápida posible.

Si has llegado hasta aquí  seguro que ya sabes que Codeigniter es uno de los frameworks MVC (Modelo-Vista-Controlador) más en alza actualmente, por su parte, Bootstrap, que fue realizado por el equipo de frontends de Twitter, es quizá (y pongo quizá por se políticamente correcto) el mejor framwork para fronend existente en la actualidad.

Combinar ambos frameworks hará que programar sea mejor que el sexo para ti. ¡A gozar!

Qué necesitas

Aunque es bastante obvio, esto es lo que necesitas tener listo para usar Bootstrap y Codeigniter juntos y en sintonía:

  • Una instalación de Codeigniter, si quieres, te enseñamos cómo instalar codeigniter y ponerlo a funcionar en este tutorial.
  • Descargar Twitter Bootstrap 3, en su web oficial.
  • jQuery. descarga esta librería de javascript aquí.

Bootstrap + Codeigniter paso a paso

Paso 1. – Crear un directorio para Bootstrap

Crea una carpeta llamada “assets” (es lo que te recomendados, si quieres ponerle otro nombre puedes) al mismo nivel que la carpeta application de Codeigniter, en esta carpeta tendremos todo el contenido de nuestro Bootstrap.

Esta es la estructura que deben tener los directorios

Paso 2. – Añadir el contenido

Al descomprimir Boostrap encontramos tres carpetas: css, fonts y js. Como necesitamos de la librería jQuery para que Bootstrap funcione vamos a meter el .js que hemos descargado de jQuery dentro de la carpeta js. Te recomiendo que utilices la versión minify, ahorras tiempo de carga…

Así quedará la carpeta assets

Paso 3. – Subir las librerías

Ahora subimos todo el contenido, las tres carpetas de antes, a la carpeta assets. Con esto tendremos casi todo listo.

Paso 4. – Enlazar desde las vistas

Que el último paso, tenemos que enlazar las librerías desde todas las vistas en las que queramos usar Bootstrap, para ello simplemente tenemos que incluir la siguiente etiqueta dentro del <head> de las vista.

" />

Con esta llamamos al css de Bootstrap.
Y añadiendo antes de </body>lo siguiente para cargar las funciones de javascript:



Fíjate en que el archivo de jQuery corresponda con el tuyo, en mi caso la versión actual es la 1.11.3, pero cuando tú leas esto quizá haya cambiado.

Con esto ya podemos empezar a usar Bootstrap en nuestro proyecto de Codeigniter.

fruiz

Ver comentarios

  • No hay que olvidarse antes cargar en autoload:

    $autoload['helper'] = array('url');

    se encuentra en : application/config/autoload.php

    • Hola buen dia.

      Si no se le añade esa linea de codigo no funcionaria?
      Yo otra por otro lado, tambien habria que modificar el archivo .htaccess?
      Quedo atento
      Gracias

      • Hola Johan,
        $autoload[‘helper’] = array(‘url’); debe aññadirse en el autoload junto con todas las librerías que quieras cargar en todo el proyecto, no lo he mencionado porque se sale de lo que es la instalación de Codeigniter. El proyecto puede funcionar sin cargar esa librería pero es muy recomendable usarla.

        Sobre tu duda del .htaccess te recomiendo que revises esto: https://googleseo.marketing/como-instalar-y-configurar-codeigniter-primeros-pasos/ ahí también hablamos de las librerías básicas que cargar.

        Saludos

  • hola tengo una duda, yo uso wamp server es alli donde debo instalar el codeigniter? y la otra pregunta es la otra carpeta assets debo crearla dentro de la carpeta apllication o fuera de esta osea dentro de la carpeta donde estara mi proyecto? me explico tengo dentro de wamp una carpeta llamada proyecto dentro de esta tengo codeigniter y tambien asset o dentro de codeigniter creo assets? de amntemano gracias por su ayuda.

    • Hola Nelson,
      debes instalar el codeigniter en un directorio dentro del directorio raíz al que hayas apuntado tu servidor.

      Seguramente la raíz de tu WAMP sea c:\wamp\www (que es la que viene por defecto), en ese caso debes instalar codeigniter en un subdirectorio de www, por ejemplo c:\wamp\www\mi_proyecto_cojonudo

      Respecto a la carpeta assets, su lugar es al mismo nivel que application, no dentro, como tú dices, en la carpeta donde está tu proyecto. Quedando así:

      c:\wamp\www\mi_proyecto_cojonudo\application
      c:\wamp\www\mi_proyecto_cojonudo\assets

      Espero haberte ayudado ;)

Share
Publicado por
fruiz

Recent Posts

Claude Code Routines: Anthropic acaba de darle un turno de noche a tu IDE

Anthropic lanzó Routines en Claude Code el 14 de abril de 2026. Tu agente IA…

56 años atrás

¿Sabías que tu web de WordPress carga 2 MB de CSS que no usa? Bienvenido a los page builders

Abre Chrome DevTools en cualquier web hecha con Elementor y mira la pestaña Coverage. Entre…

56 años atrás

Elementor en 2026: ¿page builder imprescindible o lastre de rendimiento?

Análisis equilibrado de Elementor en 2026: ecosistema masivo contra problemas de rendimiento, CSS inflado y…

56 años atrás

Build vs Buy: el informe de Retool 2026 explicado para no-techies

Retool ha publicado su informe Build vs Buy 2026 y los datos son reveladores: el…

56 años atrás

Microsoft dice que los business agents matarán al SaaS en 2030: ¿tiene razón?

Microsoft predice que los agentes de IA empresariales acabarán con el modelo SaaS tradicional antes…

56 años atrás

Por qué el shadow IT con IA es la mejor noticia para las pymes

El 60% de las empresas ya construyen software fuera del control de IT. Con la…

56 años atrás