Get a Quote

Your Name (required)

Business Name

Your Email (required)

Budget (required)

When you need this done?

Project details

Attachments

Our Partner

Web design with Bootstrap

Web design is one of the most important aspects when it comes to making your website over the internet. As it has a direct impact on the customer experience, it must be user friendly and also responsive, as many people end up visiting it from mobile devices

What is bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Bootstrap is the seventh-most-starred project on GitHub, with more than 142,000 stars, behind freeCodeCamp (almost 312,000 stars) and marginally behind Vue.js framework.

Why Use Bootstrap?

Here’s what you need to know:

1. First of all, Bootstrap is the most popular framework for creating layouts. Here are some additional reasons to use Bootstrap:

  • Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first styles are part of the framework
  • Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

2. Bootstrap has a big community and friendly support. For resources visit:

  • Check out the Bootstrap Blog.
  • You can chat with Bootstrappers with IRC in the irc.freenode.net server, in the ##bootstrap channel.
  • Have a look at what people are doing with Bootstrap at the Bootstrap Expo.

3. Bootstrap is easy to set up and create a working layout in less than an hour

They have a basic template available at http://getbootstrap.com/getting-started/#template and also a set of examples for different needs (http://getbootstrap.com/getting-started/#examples). You can just download the bootstrap repository, go to docs/examples folder, copy/paste the example you need and work on it.

4. You don’t need to know HTML and CSS well to use bootstrap, it’s a plus if you’re a backend developer and need to do some UI changes.

5. It’s fully customizable, I can choose which components I’d like to use and use variables file to get do even more color and behavior customization.

All you need to do is visit http://getbootstrap.com/customize/ , choose the plugins you need and click download. Bootstrap also provides a way to override its internal variables for advanced users, but they provide pretty decent defaults, so you shouldn’t worry about this unless you need to.

6. When you update the version of Bootstrap, you won’t see tons of errors because their core team cares about backwards compatibility.

7. Their documentation is great! Here are some resources to check out:

8. Bootstrap offers a lot of helper classes that make development of a responsive website easy and fast.

You can turn any fixed-width layout into a fluid one by simply changing your parent .container class to .container-fluid.

Bootstrap also has .visible-*-* classes to help you control the way your sections are displayed on tablets and mobile devices. Example:

<div class=”visible-xs-block visible-sm-block”></div>

In this case, the div will be displayed as a section with display: block only on phones and tablets. It will be hidden on desktop.

9. Bootstrap’s components are well-adopted to the ecosystem of popular JS MVC Frameworks like Angular. Bootstrap provides several ways to include it into your project:

Using bower:

bower install bootstrap

Using npm:

npm install bootstrap

And just simply adding a script tag with the url to bootstrap source on CDN.

We also have ui-bootstrap for Angular.js and react-bootstrap for React. You can also install them via Bower and npm. And then, for example, to create a collapse element, you just need to create similar markup:

<div uib-collapse=”isCollapsed”>

<div class=”well well-lg”>

Content of the collapse

</div>

</div>

Instead of doing a lot of jquery configuration like you would normally.

10. Bootstrap resolves a lot of cross-browser issues and you don’t need to worry about that most of the time.

Note: Bootstrap is designed to work with latest desktop and mobile browsers. This means that displays might be different in older browsers and might render differently, though according to the documentation, the displays should be fully functional.

Here are a couple of screen shots about browser compatibility.

browser

Bootstrap CDN

<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>

<!– jQuery library –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

<!– Latest compiled JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

All css class

Class NameDescription
.activeAdds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)
.activeAdds a gray background color to the active link in a default navbar. Adds a black background and a white color to the current link inside an inverted navbar.
.activeAdds a blue background color to the active list item in a list group
.activeAdds a blue background color to simulate a “pressed” button
.activeAnimates a striped progress bar
.activeAdds a blue background color to the active dropdown item in a dropdown
.activeAdds a blue background color to the active pagination link (to highlight the current page)
.affixThe Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles position:fixed on and off
.alertCreates an alert message box
.alert-dangerRed alert box. Indicates a dangerous or potentially negative action
.alert-dismissibleTogether with the .close class, this class is used to close the alert
.alert-infoLight-blue alert box. Indicates some information
.alert-linkUsed on links inside alerts to add matching colored links
.alert-successGreen alert box. Indicates a successful or positive action
.alert-warningYellow alert box. Indicates caution should be taken with this action
.badgeCreates a circular badge (grey circle – often used as a numerical indicator)
.bg-dangerAdds a red background color to an element. Represents danger or a negative action
.bg-infoAdds a light-blue background color to an element. Represents some information
.bg-primaryAdds a blue background color to an element. Represents something important
.bg-successAdds a green background color to an element. Indicates success or a positive action
.bg-warningAdds a yellow background color to an element. Represents a warning or a negative action
.breadcrumbA pagination. Indicates the current page’s location within a navigational hierarchy
.btnCreates a basic button (gray background and rounded corners)
.btn-blockCreates a block level button that spans the entire width of the parent element
.btn-dangerRed button. Indicates danger or a negative action
.btn-defaultDefault button. White background and grey border
.btn-groupGroups buttons together on a single line
.btn-group-justifiedMakes a group of buttons span the entire width of the screen
.btn-group-lgLarge button group (makes all buttons in a button group larger – increased font-size and padding)
.btn-group-smSmall button group (makes all buttons in a button group smaller)
.btn-group-xsExtra small button group (makes all buttons in a button group extra small)
.btn-group-verticalMakes a button group appear vertically stacked
.btn-infoLight-blue button. Represents information
.btn-linkMakes a button look like a link (get button behavior)
.btn-lgLarge button
.btn-primaryBlue button.
.btn-smSmall button
.btn-successGreen button. Indicates success or a positive action
.btn-warningYellow button. Represents warning or a negative action
.btn-xsExtra small button
.captionAdds a caption text inside a .thumbnail
.caretCreates a caret arrow icon , which indicates that the button is a dropdown
.carouselCreates a carousel (slideshow)
.carousel-captionCreates a caption text for each slide in the carousel
.carousel-controlContainer for next and previous links
.carousel-indicatorsAdds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing)
.carousel-innerContainer for slide items
.center-blockCenters any element (Sets an element to display:block with margin-right:auto and margin-left:auto)
.checkboxContainer for checkboxes
.checkbox-inlineMakes multiple checkboxes appear on the same line
.clearfixClears floats
.closeIndicates a close icon
.col-*-*Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column values can be 1-12.
.col-*-offset-*Move columns to the right. These classes increase the left margin of a column by * columns
.col-*-pull-*Changes the order of the grid columns
.col-*-push-*Changes the order of the grid columns
.collapseIndicates collapsible content – which can be hidden or shown on demand
.collapse inShow the collapsible content by default
.containerFixed width container with widths determined by screen sites. Equal margin on the left and right.
.container-fluidA container that spans the full width of the screen
.control-labelAllows a label to be used for form validation
.dangerAdds a red background to the table row (<tr> or table cell (<td>). Indicates a dangerous or potentially negative action
.disabledDisables a button (adds opacity and a “no-parking-sign” icon on hover)
.disabledDisables a dropdown item (adds a grey text color and a “no-parking-sign” icon on hover)
.disabledDisables a pagination link (cannot be clicked – adds a grey text color and a “no-parking-sign” icon on hover)
.disabledDisables a list item in a list group (cannot be clicked – adds a grey background color and a “no-parking-sign” icon on hover)
.dividerUsed to separate links in the dropdown menu with a thin horizontal border
.dl-horizontalLines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side
.dropdownCreates a toggleable menu that allows the user to choose one value from a predefined list
.dropdown-headerUsed to add headers inside the dropdown menu
.dropdown-menuAdds the default styles for the dropdown menu container
.dropdown-menu-rightRight-aligns a dropdown menu
.dropdown-toggleUsed on the button that should hide and show (toggle) the dropdown menu
.dropupIndicates a dropup menu (upwards instead of downwards)
.embed-responsiveContainer for embedded content. Makes videos or slideshows scale properly on any device
.embed-responsive-16by9Container for embedded content. Creates an 16:9 aspect ratio embedded content
.embed-responsive-4by3Container for embedded content. Creates an 4:3 aspect ratio embedded content
.embed-responsive-itemUsed inside .embed-responsive. Scales the video nicely to the parent element
.fadeAdds a fading effect when closing an alert box
.form-controlUsed on input, textarea, and select elements to span the entire width of the page and make them responsive
.form-control-feedbackForm validation class
.form-control-staticAdds plain text next to a form label within a horizontal form
.form-groupContainer for form input and label
.form-inlineMakes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide)
.form-horizontalAligns labels and groups of form controls in a horizontal layout
.glyphiconCreates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set
.has-dangerAdds a red color to the label and a red border to the input, as well as an error icon inside the input (used together with .has-feedback)
.has-feedbackAdds feedback icons for inputs (checkmark, warning and error signs)
.has-successAdds a green color to the label and a green border to the input, as well as a checkmark icon inside the input (used together with .has-feedback)
.has-warningAdds a yellow/orange color to the label and a yellow/orange border to the input, as well as a checkmark icon inside the input (used together with .has-feedback)
.help-blockA block of help text that breaks onto a new line and may extend beyond one line.
.hiddenForces an element to be hidden (display:none)
.hidden-*Hides content depending on screen size
.hideDeprecated. Use .hidden instead
.h1 - .h6Makes an element look like a heading of the chosen class (h1-h6)
.icon-barUsed in the navbar to create a hamburger menu (three horizontal bars)
.icon-nextUnicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon
.icon-prevUnicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon
.img-circleShapes an image to a circle (not supported in IE8 and earlier)
.img-responsiveMakes an image responsive
.img-roundedAdds rounded corners to an image
.img-thumbnailShapes an image to a thumbnail (borders)
.inFades in tabs
.infoAdds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or action
.initialismDisplays the text inside an <abbr> element in a slightly smaller font size
.input-groupContainer to enhance an input by adding an icon, text or a button in front or behind it as a “help text”
.input-group-lgLarge input group
.input-group-smSmall input group
.input-group-addonTogether with the .input-group class, this class makes it possible to add an icon or help text next to the input field
.input-group-btnTogether with the .input-group class, this class attaches a button next to an input. Often used as a search bar
.input-lgLarge input field
.input-smSmall input field
.invisibleMakes an element invisible (visibility:hidden). Note: Even though the element is invisible, it will take up space on the page
.itemClass added to each carousel item. May be text or images
.jumbotronCreates a padded grey box with rounded corners that enlarges the font sizes of the text inside it. Creates a big box for calling extra attention to some special content or information
.labelAdds a grey rounded box to an element. Provides additional information about something (e.g. “New”)
.label-dangerRed label
.label-infoLight-blue label
.label-successGreen label
.label-warningYellow label
.leadIncrease the font size and line height of a paragraph
.leftUsed to identify the left carousel control
.list-groupCreates a bordered list group for <li> elements
.list-group-itemAdded to each <li> element in the list group
.list-group-item-headingCreates a list group heading (used on other elements besides <li>)
.list-group-item-textUsed for item text inside the list group (used on other elements besides <li>)
.list-group-item-dangerRed background color for a list item in a list group
.list-group-item-infoLight-blue background color for a list item in a list group
.list-group-item-successGreen background color for a list item in a list group
.list-group-item-warningYellow background color for a list item in a list group
.list-inlinePlaces all list items on a single line (horizontal menu)
.list-unstyledRemoves all default list-style (bullets, left margin, etc.) styling from a <ul> or <ol> list
.markHighlights text: Highlighted text
.mediaAligns media objects (like images or videos – often used for comments in a blog post etc)
.media-bodyText that should appear next to a media object
.media-headingCreates a heading inside the media object
.media-listNested media lists
.media-objectIndicates a media object (image or video)
.modalIdentifies the content as a modal and brings focus to it
.modal-bodyDefines the style for the body of the modal. Add any HTML markup here (p, img, etc)
.modal-contentStyles the modal (border, background-color, etc). Inside this, add the modal’s header, body and footer, if needed
.modal-dialogSets the proper width and margin of the modal
.modal-footerThe footer of the modal (often contains an action button and a close button)
.modal-headerThe header of the modal (often contains a title and a close button)
.modal-lgLarge modal (wider than default)
.modal-openUsed on the <body> element to prevent page scrolling (overflow:hidden)
.modal-smSmall modal (less width)
.modal-titleThe title of the modal
.nav nav-tabsIndicates a tabbed menu
.nav nav-pillsIndicates a pill menu
.nav .navbar-navUsed on a <ul> container that contains the list items with links inside a navigation bar
.nav-justifiedCenters tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered)
.nav-stackedVertically stack tabs or pills
.nav-tabsCreates a tabbed menu
.navbarCreates a navigation bar
.navbar-brandAdded to a link or a header element inside the navbar to represent a logo or a header
.navbar-btnVertically aligns a button inside a navbar
.navbar-collapseCollapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)
.navbar-defaultCreates a default navigation bar (light-grey background color)
.navbar-fixed-bottomMakes the navbar stay at the bottom of the screen (sticky/fixed)
.navbar-fixed-topMakes the navbar stay at the top of the screen (sticky/fixed)
.navbar-formAdded to form elements inside the navbar to vertically center them (proper padding)
.navbar-headerAdded to a container element that contains the link/element that represent a logo or a header
.navbar-inverseCreates a black navigation bar (instead of light-grey)
.navbar-leftAligns nav links, forms, buttons, or text, in the navbar to the left
.navbar-linkStyles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect – white color in an inversed navbar and a black color in a default navbar)
.navbar-navUsed on a <ul> container that contains the list items with links inside a navigation bar
.navbar-rightAligns nav links, forms, buttons, or text in the navbar to the right.
.navbar-static-topRemoves left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default)
.navbar-textVertical align any elements inside the navbar that are not links (ensures proper padding)
.navbar-toggleStyles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars)
.nextUsed in the carousel control to identity the next control
.nextUsed to align pager buttons to the right side of the page (next button)
.page-headerAdds a horizontal line under the heading (+ adds some extra space around the element)
.pagerCreates previous/next buttons (used on <ul> elements)
.paginationCreates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements)
.pagination-lgLarge pagination (each pagination link gets a font-size of 18px. Default is 14px)
.pagination-smSmall pagination (each pagination link gets a font-size of 12px. Default is 14px)
.panelCreates a bordered box with some padding around its content
.panel-bodyContainer for content inside the panel
.panel-collapseCollapsible panel (toggle between hiding and showing panel(s))
.panel-dangerRed panel. Indicates danger
.panel-infoLight-blue panel. Indicates information
.panel-successGreen panel. Indicates success
.panel-warningYellow panel. Indicates warning
.panel-footerCreates a panel footer (light background color)
.panel-groupUsed to group many panels together. This removes the bottom margin below each panel
.panel-headingCreates a panel header (light background color)
.panel-titleUsed inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px)
.popoverPopup-box that appears when the user clicks on an element
.pre-scrollableMakes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar)
.prevUsed in carousels to indicate a “previous” link
.previousUsed to align pager buttons to the left side of the page (previous button)
.progressContainer for progress bars
.progress-barCreates a progress bar
.progress-bar-dangerRed progress bar. Indicates danger
.progress-bar-infoLight-blue progress bar. Indicates information
.progress-bar-stripedCreates a striped progress bar
.progress-bar-successGreen progress bar. Indicates success
.progress-bar-warningYellow progress bar. Indicates warning
.pull-leftFloat an element to the left
.pull-rightFloat an element to the right
.rightUsed to identify the right carousel control
.rowContainer for responsive columns
.row-no-guttersRemoves the gutters from a row and its columns
.showShows an element (display:block)
.smallCreates a lighter, secondary text in any heading
.sr-onlyHides an element on all devices except for screen readers
.sr-only-focusableHides an element on all devices except for screen readers
.successAdds a green background color to a table row (<tr> or table cell (<td>). Indicates success or a positive action
.tab-contentUsed together with .tab-pane to creates toggleable/dynamic tabs/pills
.tab-paneUsed together with .tab-content to creates toggleable/dynamic tabs/pills
.tableAdds basic styling to a table (padding, bottom borders, etc)
.table-borderedAdds borders on all sides of the table and cells
.table-condensedMakes a table more compact by cutting cell padding in half
.table-hoverCreates a hoverable table (adds a grey background color on table rows on hover)
.table-responsiveMakes a table responsive (adds a horizontal scrollbar when needed)
.text-capitalizeIndicates capitalized text
.text-centerCenter-aligns text
.text-dangerRed text color. Indicates danger
.text-hideHides text (helps replace an element’s text content with a background image)
.text-infoLight-blue text color. Indicates information
.text-justifyIndicates justified text
.text-leftAligns the text to the left
.text-lowercaseChanges text to lowercase
.text-mutedGrey text color
.text-nowrapPrevents the text from wrapping
.text-primaryBlue text color
.text-rightAligns text to the right
.text-successGreen text color. Indicates success
.text-uppercaseMakes text uppercase
.text-warningYellow/orange text color. Indicates warning
.thumbnailAdds a border around an element (often images or videos) to make it look like a thumbnail
.tooltipPopup-box that appears when the user moves the mouse pointer over an element
.visible-*Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* instead
.visible-print-blockDisplays the element (display:block) in print (pre)view
.visible-print-inlineDisplays the element (display:inline) in print (pre)view
.visible-print-inline-blockDisplays the element (display:inline-block) in print (pre)view
.hidden-printHides the element (display:none) in print (pre)view
.warningAdds a yellow background color to the table row (<tr> or table cell (<td>). Indicates a warning
.wellAdds a rounded border around an element with a gray background color and some padding
.well-lgLarge well (more padding)
.well-smSmall well (less padding)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code