|Language:||English, Spanish, Indonesian|
|Distribution:||Free* [*Register to download]|
Objective. The most popular of the front end frameworks, Twitter Bootstrap, has come to its third version (v). This Twitter Bootstrap Tutorial. This Bootstrap tutorial contains hundreds of Bootstrap examples. With our online editor, you can edit the code, and click on a button to view the result. Bootstrap. Tutorial 7. Sukwon Oh [email protected] for quickly styling your website. ▷ Bootstrap lets us skip writing CSS and focus instead on HTML.
The above is enough to add a navigation bar to your site. However, at the moment, it still looks like very little. While you are able to add default colors for example, by giving the navbar a class like bg-dark navbar-dark , we instead want to add our own. Instead, just like with a WordPress child theme, you are able to add your own CSS files which you can use to overwrite existing styling.
For that, simply create a blank file with your text editor and call it main. If you decide to place your inside the css folder, be sure to include the correct path in the link. From here, you are able to add custom CSS to your site.
Create a Page Content Container After the navigation bar, the next thing you want is a container for the page content. This is another one of those default Bootstrap classes.
Applying it to the div element automatically applies a bunch of CSS to it. The -fluid part makes sure the container stretches across the entire width of the screen. This will start changing now.
For that, you will create another div element inside the one you just included earlier. Include a Page Title and Body Text Now you probably want to add a page title in the form of a heading plus some body text. That way, your visitors will know immediately which site they are on and what they can expect from it.
Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.
For that reason, we would be amiss not to include how to create one in this Bootstrap tutorial. The framework offers plenty of tools to create buttons quickly and easily. You can find a lot of examples here. Set up a Three-column Section I am already quite satisfied with how things are shaping up. However, we are not done with the page yet.
Next up, we want to create three columns below the main content for additional information. This is a specialty of Bootstrap since it plays to its strength: creating a grid.
You need this whenever creating columns to act as a container for the grid. As for the columns, they all have several classes: col-lg-4, col-md-4 and col-sm These denote that we are dealing with columns and the size they will have on different screens. To understand this, you need to know that in a Bootstrap grid, all columns in one row always add up to the number So, giving them the classes above means that they will take up one third of the screen on large and medium screens 12 divided by 3 is 4 but the entire screen on small devices 12 out of 12 columns.
You will also notice that I included images and added the. This is to make them responsive so that they scale along with screen that the page is viewed on. In addition to that, you have the following styling included in the usual place:. Add a Contact Form You will notice that one of the new fields is still empty. This was on purpose because we want to add a contact form to it. This is a very normal practice for landing pages to allow visitors to get in touch.
There is a lot more you can do with forms, which you can find out in the documentation. However, for demonstration purposes the above is enough. Place it inside the remaining empty column and then add this styling in main. Create a Two-column Footer Alright, we are now getting towards the end of the Bootstrap tutorial.
The last thing you want to add to your landing page is a footer section with two columns. You can find more information about Bootstrap and typography here. In addition to the above, you can use styling like this:. Add Media Queries The page is basically ready by now. It is also fully responsible. However, no worries, you can correct that quite easily with a simple media query.
Unless you are using SASS for compiling your Bootstrap site, these work the same way as in other instances. You just need to keep in mind the preset break points included in Bootstrap. As a consequence, to correct the above problem, you can simply include a piece of code like this: media max-width: Putting it Altogether If you have been following along, you should now be set with page very similar to the one below. Plus, it also works on mobile and is completely responsive. Not bad for a few lines of code, right?
Conclusion Bootstrap is an open source, front-end development framework anyone can use for free.
It allows you to quickly prototype designs, create web pages and generally hit the ground running. While not as comfortable as using WordPress, Bootstrap is still a valid alternative to create a website.
By now, you know how to set up and install Bootstrap and its components, create a simple landing page include some basic content and style it. You can create navigation menus, set background images, include buttons, columns and contact forms. Of course, there is more to learn. Thanks to this basic Bootstrap tutorial, you now know enough to keep moving forward by yourself.
If you want to dive deeper into the framework, a good starting point is W3Schools. Aside from that, we hope you liked this beginner tutorial and would like to hear from you.
Do you have any thoughts on the Bootstrap tutorial above?
Questions, comments, requests? Then, add another div which will contain the description. Add the class. After all of that, our header will look like this:. In this section, we will use some Bootstrap Grid to divide the section into two parts. To start our grid, we have to assign the. The first section will be on the left and will contain a picture, the second section will be on the right and contain a description.
Remember that a grid is divided into 12 columns. In the first div on the left side:. After adding the the HTML elements on the right-side, the structure of the code will look like this:.
Each item in our gallery will take up 4 columns remember, col-md-4 for medium devices, col-lg-4 for large devices. Cards in Bootstrap 4 make blog design so much easier. The cards are appropriate for articles and posts. To create a card, we use the class. We need to add some CSS style to the cards:. After adding the Blog section to our website, the design should now look something like this:. In this section we will use the grid system to distribute even space between images.
Each image takes up 3 columns. The Contact Form section will contain a form through which visitors can send an email or give feedback. We will use some Bootstrap classes to make the design beautiful and responsive. Like Bootstrap 3, Bootstrap 4 also uses the.
See Bootstrap 4 document for more information. In our Contact form we will wrap each input between a div that has the class. The index.
Add this link into your main. The last thing missing is scroll effect. Set an id attribute to each section. The id must be identical to the data-value attribute in the navbar link for the scroll to work:.
Bootstrap 4 is a great option for building your web application. It will also help you to include responsiveness in your website, therefore delivering a premium user experience to your users.
Check out my Bootstrap Class to learn Bootstrap