Bootstrap 4

Bootstrap provides CSS classes to style your webpages on the go. This saves a lot of time building web page. Before start  we need to  either download the bootstrap and include them in project or refer to bootstrap CDN.

Copy and paste following, that links to bootstrap.min.css beta version 4.2 (latest version as of 5 Jan 2019)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

Also copy and paste following javaScript

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Template


The template showing where to place the link to bootstrap CSS and javascripts.

<!doctype html>

<html lang="en">

  <head>

    <title>Hello, world!</title>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

  </head>

  <body>

    <h1>Hello, world!</h1>



    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

  </body>

</html>

the view port meta tag is important to properly scale the page content in different device sizes according to the width of the device.

Example


<!doctype html>

<html lang="en">

  <head>

    <title>Hello, world!</title>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

  </head>

  <body>

    <div class = "container">

       <div class = "jumbotron">

         <h1 class = "display-1"> My First Jumbotron </h1>

         <p class = "lead">bootstrap is cool</p>

         <button class = "btn btn-primary">view more</button>

       </div> <!-- jumbotron close tag-->

    </div> <!-- container close tag -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

  </body>

</html>

The output



This example has .container  class that aligns the contents and white spaces at both sides. In the container element we have the jumbo tron, a larger display area. It uses the .jumbotron bootstrap class. In that jumbo tron we have heading, paragraph and button

The heading uses .display-1 class, which further styles the heading with bigger text and lighter font wight. There are four levels .display-* classes in bootstrap, where * is number with value 1 to 4 and 1 being the biggest font size.

The paragraph uses .lead class that alters the text style. This class is used to make the text written in the paragraph out stand.

The button element is styled using the .btn class and .btn-primary gives the color to the button, this including the button press and hover actions.

Conclusion


As you can see, most of the hard work of writing CSS is already done by Bootstrap. Just by using the available classes we can create nice looking websites, and if needed we can customize this classes with our own styles.

Comments

Post a Comment

Popular posts from this blog

Drawing Simple Pie Chart

Image
To draw pie chart with 5 sectors. The program calculates the total of all the input given by user and find the angle in degrees to draw each sectors. When the program first loads, chart based on default values is painted by the program. User can edit the values in the text field and presses draw button to redraw the chart. Each time the draw button is pressed, new set of angle is calculated and repainted. I have attached the the sources for this program. It is simple and needs upgrades. Pie.java This class executed the program and initializes the components JTextField and JPanel to draw the chart. package coolApp.graphics; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Pie { JTextField a,b,c,d,e; JButton btnDraw; double total; JPanel contentPane; Pie(){ JFrame frame = new JFrame("Pie - CoolApps"); frame.setSize(500,500); contentPane = new JPanel(); contentPane.setLayout(new BorderLayout()); frame...
Read more

VB.net connecting to SQL Server

Connecting to SQL server 2014 from VB.Net 2017, read values from the database and display the data in windows form. Before begin to write this program, first we need to import SqlClient class. Imports System.Data.SqlClient Step 1 Create a sql connection object. This is to make connection to object. Dim conn As New SqlConnection() Step 2 Set the connection string to the sqlconnection object: conn.ConnectionString = connStr Road block The variable connStr is a connection string. Connection object need connection string to make connection to database. It has information like who providing the database, the name of the database and some security information. Dim connStr As String = "Data Source = ServerInstanceName;Initial Catalog=testDB;Integrated Security=True" Let's break down the connection string into the three main components. Dim provider As String = "ServerInstanceName;" Dim database As String = "Initial Catalog=testDB;" Dim ...
Read more

Setting up data set and display it

Before we display some data in DataGridView control in Visual Basic window we must create a data set. Data Set is an object that can hold data tables where all the data is stored in rows and columns. the first step is to create a table. Dim  dataTableObjectName as DataTable = New DataTable(tableName) this will create a table which is reference using the dataTableObjectName Example Dim userTable As DataTable = New DataTable("Users") Next step is adding columns to the table Dim column as DataColumn dataTableObjectName.Columns.Add (columnName, columnType) Example userTable.Columns.Add("userID", Type.GetType("System.Int.32")) ' adding second and third column userTable.Columns.Add("userName", Type.GetType("System.String")) userTable.Columns.Add("userContact", Type.GetType("System.String")) once we we columns in the table we can add row The rows contains records or the data for each user. dat...
Read more