DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. The Big Bang of Web Development: What Is Bootstrap?

The Big Bang of Web Development: What Is Bootstrap?

If you're interested in web development, learning to work with Bootstrap is a necessary stepping stone. Read on for a great introduction.

Meredith Hassett user avatar by
Meredith Hassett
·
Jun. 13, 18 · Tutorial
Like (6)
Save
Tweet
Share
11.11K Views

Join the DZone community and get the full member experience.

Join For Free

Welcome back to our cosmic exploration of web development!

If you ever need to review our previous stages of web development evolutions, just look here:

1: Starting at index.html

2: Adding some style with CSS

3: Get moving with JavaScript

Hopefully with the weeks off due to my travel schedule you've been able to dive a bit deeper into JS or HTML or CSS. We'll be deviating away from the basics for a bit to get to know how the landscape has changed (and a little bit of why).

This week, let's take a look at Bootstrap. Bootstrapping websites became quite popular in 2011. Why did it become so popular? Two primary reasons: it's easier on the developer - developing custom CSS is tedious; it provides a consistent user experience - created by Twitter, people knew how to interact with page because they were already trained on the layout from using Twitter.

Nowadays, when creating a custom webpage, Bootstrapping is the bare minimum expectation for design. It's more of an expectation than a design decision. And we'll see why.

Remember that lovely webpage we made?

Yea, that one. Open that back up again, because we are going to make a few simple changes and turn the experience from drab to fab.

It's pretty simple to get started. All we have to do is swap out our stylesheet link in the index.html file. Instead of pointing to the file we created, we'll point to the Bootstrap cloud hosting of the CSS stylesheets.

DELETE your stylesheet link in the header. In its place, PASTE in the Bootstrap link tag.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

SAVE your changes. Now open your index.html file in the browser and see how that change impacted your app.

Some of our styles don't exist in the Bootstrap styling, so you may immediately notice those color changes. Another thing you might notice is the font is different. Bootstrap's default font is different than the browsers. And one of the last key differences we see is the button. The button styling is bigger and more squared-off than the default.

Let's update some of our styling tags.

Back on the Bootstrap website, you can find the documentation about styling.

If we explore the documentation, we can find some more information about styling images. Take a look! Go to Documentation, then Content, and then Images.

We can make the image responsive to screen size and density. When you are designing your web pages, you always need to be thinking about the desktop and mobile browser use case. Many viewers will be coming in through a mobile browser, and the user experience on both the web and mobile needs to be considered.

If you scroll down on the Images page, you will be styling for responsive images, thumbnails, and pictures. Let's try out the responsive styling for our image.

Copy the class portion of the styling code snippet.

class="img-fluid"

Open your index.html file in a text editor. Add the class property to the image tag you already have.

<img id="myImage" class="img-fluid">

SAVE your changes, and refresh your index.html file in the browser. Click the Load Picture button. As you change your browser window size, notice how the image also changes size instead of being cut off.

Bootstrap also has styled new tags like the sample tag, which can be found under Content > Code. Let's style our second paragraph as if it was a computer output.

Replace the <p> tags with the <samp> tag.

<samp>And then I added more that I want to be in a new paragraph. </samp>

SAVE your changes and run the index.html file in the browser.

But now we lost some styling! The link is no longer on a new line. When I showed you how to break things up before, we used the <br /> tag. While this works, it's not a good practice. What we should you use are styled <div> tags. <div> helps us define a section of tags, text, and elements that we want to be grouped together. It helps define a "fenced off" area on a page. You can nest div tags to create further styling.

Wrap the <samp> line with a <div>.

Under the Utilities section of the Bootstrap documentation, we can find more information about how to style these div boxes. Looking at the display section, we can find examples of how to display text. I'm grabbing the blue d-block example.

class="d-block p-2 bg-primary text-white"

Now my div looks like this:

<div class="d-block p-2 bg-primary text-white">
  <samp>And then I added more that I want to be in a new paragraph. </samp>
</div>

And when I SAVE my changes and refresh my web page in the browser, it looks like this:

Continue to explore the Bootstrap documentation to see all that we can do with it. It makes styling some much easier. Come back next time ready to make some navigation bars!

Bootstrap (front-end framework) Web development

Published at DZone with permission of Meredith Hassett, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How To Generate Code Coverage Report Using JaCoCo-Maven Plugin
  • The Data Leakage Nightmare in AI
  • Top Authentication Trends to Watch Out for in 2023
  • SAST: How Code Analysis Tools Look for Security Flaws

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: