Macey  Kling

Macey Kling

1598941920

Teach Yourself How to Work With Bootstrap 4 in Ten Minutes or Less

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

This quote from Wikipedia defines the Bootstrap pretty well. I don’t want to add something more instead I prefer to talk about bootstrap structure and how to work with bootstrap. Before any further, I need to mention that, to understand the bootstrap it’s better to have some Flexbox knowledge. It is important because at V4 bootstrap foundation lay on top of flex instead of floats.

List of Content:

1. How Bootstrap works

2. What has changed at V4

3. Installation

4. Bootstrap Grid System

5. Customization of Bootstrap via Sass

6. Important Components to Keep in Mind

7. Summary

8. Conclusion

How Bootstrap Works

To understand bootstrap, we need to investigate how an external Front-End library works in our app. I’ll demonstrate it with an easy example. Let’s assume we create a library called ‘Example’. This library has some predefined classes.

.example {
background-color: tomato;
}

To use this library, we need to add CDN (Content Delivery Network) link to our page. When we get connected to our library and get the cached files into our browser, we can use those predefined classes. Those classes have some CSS properties that modify our overall layout and look.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://example.com/example/4.5.0/css/example.min.css"
integrity="sha384–9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="example">
Hello world!
</div>
</body>
</html>

Just to inform you, our link in the head is not a real link. We are assuming that we have a link that has some predefined classes in it. To compile and use them, we just put this link so our .example class can work on our page.

This was a wandering case, but Bootstrap uses the same logic under the hood. A lot of developers have created some style just to use it whenever it’s needed beforehand and we are just taking their styles to our page. For more detailed explanation wait for the installation part. We’ll discuss the two ways of installation and Bootstrap’s CSS file.

What Has Changed at V4

To you who knows Bootstrap for a long time, those changes make more sense. After I learned the details of them, I could say bootstrap makes itself live longer with those changes and they are quite tactical changes that are very useful. Even V5 has a greater impact on the performance, and I am leaving this discussion for a future advanced article.

#bootstrap #css #css3 #bootstrap-beginners #hackernoon-top-story #learning-to-code #tutorial #coding

What is GEEK

Buddha Community

Teach Yourself How to Work With Bootstrap 4 in Ten Minutes or Less
Macey  Kling

Macey Kling

1598941920

Teach Yourself How to Work With Bootstrap 4 in Ten Minutes or Less

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

This quote from Wikipedia defines the Bootstrap pretty well. I don’t want to add something more instead I prefer to talk about bootstrap structure and how to work with bootstrap. Before any further, I need to mention that, to understand the bootstrap it’s better to have some Flexbox knowledge. It is important because at V4 bootstrap foundation lay on top of flex instead of floats.

List of Content:

1. How Bootstrap works

2. What has changed at V4

3. Installation

4. Bootstrap Grid System

5. Customization of Bootstrap via Sass

6. Important Components to Keep in Mind

7. Summary

8. Conclusion

How Bootstrap Works

To understand bootstrap, we need to investigate how an external Front-End library works in our app. I’ll demonstrate it with an easy example. Let’s assume we create a library called ‘Example’. This library has some predefined classes.

.example {
background-color: tomato;
}

To use this library, we need to add CDN (Content Delivery Network) link to our page. When we get connected to our library and get the cached files into our browser, we can use those predefined classes. Those classes have some CSS properties that modify our overall layout and look.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://example.com/example/4.5.0/css/example.min.css"
integrity="sha384–9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="example">
Hello world!
</div>
</body>
</html>

Just to inform you, our link in the head is not a real link. We are assuming that we have a link that has some predefined classes in it. To compile and use them, we just put this link so our .example class can work on our page.

This was a wandering case, but Bootstrap uses the same logic under the hood. A lot of developers have created some style just to use it whenever it’s needed beforehand and we are just taking their styles to our page. For more detailed explanation wait for the installation part. We’ll discuss the two ways of installation and Bootstrap’s CSS file.

What Has Changed at V4

To you who knows Bootstrap for a long time, those changes make more sense. After I learned the details of them, I could say bootstrap makes itself live longer with those changes and they are quite tactical changes that are very useful. Even V5 has a greater impact on the performance, and I am leaving this discussion for a future advanced article.

#bootstrap #css #css3 #bootstrap-beginners #hackernoon-top-story #learning-to-code #tutorial #coding

Vincent Lab

Vincent Lab

1605024026

Bootstrap Tutorial 2020 - Getting Started

In this video, I’ll be showing you how to quickly get started with Bootstrap.

#bootstrap tutorial #introduction #bootstrap 4 #bootstrap #bootstrap tutorial for beginners step by step #getting started

Roberta  Ward

Roberta Ward

1593086640

Angular 9 Bootstrap 4.5 tabs working example - therichpost

1. Very first, you need to run below commands to set Bootstrap 4.5 behaviour into your angular 9 application:

npm install --save bootstrap
npm install jquery --save
npm install --save @types/jquery
npm install popper.js --save

2. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

3. Now you need to add below code into your app.component.html file:

<div class="container">
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active show">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
  </div>

#angular 8 #angular 9 #bootstrap 4 #bootstrap 4.5

Houston  Sipes

Houston Sipes

1597056398

How to put items underneath each other flex box in Bootstrap 4 ?

Flexbox in Bootstrap 4: From bootstrap 3 to bootstrap 4 amazing change has occurred that bootstrap 4 can utilize flexbox to handle the layout of content. The FlexBox Layout Module makes it easier to design a flexible responsive layout structure.

Approach: Place the direction of flex items in a flex container with direction utilities. In most cases, you will be able to exclude the horizontal class as the browser default is a row. In any case, you will experience circumstances where you required to explicitly set this esteem (like responsive layouts).

The following Examples represent different ways to put items underneath each other in a Flex-Box.

**Example 1: **Use .**flex-column **class to put items underneath each other.

<div class="d-flex flex-column"></div>
  • HTML

<!DOCTYPE html>

<``**html** lang``=``"en"``>

<``**head**``>

<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"

integrity``=

"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

crossorigin``=``"anonymous"``>

</``**head**``>

<``**body**``>

<``**center**``>

<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>

<``**div** class``=``"d-flex flex-column bd-highlight mb-3"``>

<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>

</``**div**``>

</``**center**``>

</``**body**``>

</``**html**``>

Output:

**Example 2: **You can also use the .flex-column-reverse class to put items underneath each other in reverse order. Displaying flex-box in reverse order.

  • HTML

<!DOCTYPE html>

<``**html** lang``=``"en"``>

<``**head**``>

<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"

integrity``=

"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

crossorigin``=``"anonymous"``>

<``**title**``>flexbox | bootstrap4</``**title**``>

</``**head**``>

<``**body**``>

<``**center**``>

<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>

<``**div** class``=``"d-flex flex-column-reverse bd-highlight mb-3"``>

<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>

</``**div**``>

</``**center**``>

</``**body**``>

</``**html**``>

Output:

**Example 3: By using flex-direction: column; and align-items: center; **you can place items underneath each other in the center. Thus, as shown below, we can place icons or images underneath each other using flexbox in bootstrap 4.

  • HTML

<!DOCTYPE html>

<``**html** lang``=``"en"``>

<``**head**``>

<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"

integrity``=

"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

crossorigin``=``"anonymous"``>

<``**script** src``=``"[https://kit.fontawesome.com/577845f6a5.js](https://kit.fontawesome.com/577845f6a5.js)"

crossorigin``=``"anonymous"``>

</``**script**``>

<``**title**``>flexbox | bootstrap4</``**title**``>

<``**style** type``=``"text/css"``>

.my_content {

flex-grow: 1;

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

}

.my_options {

border: 1px solid green;

display: flex;

align-items: center;

justify-content: center;

}

</``**style**``>

</``**head**``>

<``**body**``>

<``**center**``>

<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>

</``**center**``>

<``**div** class``=``"my_content"``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-down fa-2x"

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-down</``**h3**``>

</``**div**``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-left fa-2x"

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-left</``**h3**``>

</``**div**``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-right fa-2x"

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-right</``**h3**``>

</``**div**``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-up fa-2x"

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-up</``**h3**``>

</``**div**``>

</``**div**``>

</``**body**``>

</``**html**``>

#bootstrap #web technologies #web technologies questions #bootstrap-4 #bootstrap-misc #picked

Houston  Sipes

Houston Sipes

1597957200

Bootstrap Cards Design | Bootstrap 4 Tutorial for Beginners

Bootstrap Cards Design | Bootstrap 4 Tutorial for Beginners

#bootstrap #bootstrap 4 #beginners