# Bootstrap website



## Acer2000 (Sep 17, 2006)

Hello,

I'm learning Bootstrap coding and I created my first Boostrap webpage but for some reason, I'm unable to resolve the issue with the text in the footer area when resizing the webpage. Everything else seems to be working fine. I've attached the HTML and CSS files. Will appreciate you explaining what I'm missing. Thanks and cheers

CSS:

html {
height: 100%;
}

body {
background: #fff;
font-family: Century Gothic,
color: #808080;
}

}
@font-face {
font-family: Century Gothic;
src: url(../fonts/Gothic.ttf);
}


.container {
margin: 0 auto;
width: 60%;
text-align: center;
}

h1 {
display: block;
margin-top: 5.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 17px;
font-family: Century Gothic;
color: #FF7575;
}


h2 {
display: block;
margin-top: 0.45em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 50px;
font-family: High Tower Text;
color: #808080;
}

/* unvisited link */
a:link {
color: #808080;
}

/* mouse over link */
a:hover {
color: #FF7575;
text-decoration: none;
}

h3 {
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 18px;
font-family: Century Gothic;
color: #808080;
}

.footer {
padding: 2em;
}


.footer:after { /* this is the border */
content:"";
display: block;
width: 70em;
max-width:80%;
border-bottom: 1px solid #C0C0C0;
margin: 2em auto 0;
}


p.copyright {
font-family: Century Gothic;
font-size: 14px;
color: #808080;

}

p.legal {
font-family: Century Gothic;
font-size: 14px;
color: #808080;

}



HTML


----------



## Acer2000 (Sep 17, 2006)




----------



## axe0 (Jun 15, 2016)

It appears the HTML code is missing, if possible edit the post or add the HTML in a new post.


----------



## Acer2000 (Sep 17, 2006)

Oh, sorry, I thought I posted the HMTL file as well. I'm unable to post the HMTL for some reason.


----------



## axe0 (Jun 15, 2016)

Put it inside code tags, like
[ code ]HTML here[ / code ]
without the spaces.


----------



## Acer2000 (Sep 17, 2006)




----------



## Acer2000 (Sep 17, 2006)

I tried and it did not work


----------



## axe0 (Jun 15, 2016)

Attach the HTML file.


----------



## Acer2000 (Sep 17, 2006)

It won't attach. I get an error message


----------



## Acer2000 (Sep 17, 2006)

I hope it works now


----------



## Acer2000 (Sep 17, 2006)

It's not working.


----------



## axe0 (Jun 15, 2016)

As .txt file should work.


----------



## Acer2000 (Sep 17, 2006)

I know, but it's not taking it


----------



## Acer2000 (Sep 17, 2006)

*







*


----------



## axe0 (Jun 15, 2016)

Final solution, upload it to onedrive, dropbox, google drive or a similar service you use and post a share link.


----------



## wmorri (May 29, 2008)

Hey I wanted to just jump in and say that we are working on the back end with people to get the attachment issue working? I know it is very troubling currently. Hopefully it will be figured out in the near future. Thank you for your patients.


----------



## ash369 (Nov 24, 2008)

Don't quite fully understand what exactly the issue is your trying to resolve? The center aligned text?


```
footer .copyright {
    text-align: center;
}
```


----------



## Acer2000 (Sep 17, 2006)

wmorri said:


> Hey I wanted to just jump in and say that we are working on the back end with people to get the attachment issue working? I know it is very troubling currently. Hopefully it will be figured out in the near future. Thank you for your patients.


Thanks


----------



## Acer2000 (Sep 17, 2006)

Ok, since I'm learning a lot of Bootstrap using W3 Schools, I got question: I'm trying to decrease the width of the left container but I'm unable to figure it out. I was able to change the text size, etc. by adding a custom CSS like this one and it worked:

.bg-warning {
background-color: #fff;
font-family: Century Gothic;
font-size: 16px;
color: #333;
padding-top: 30px;

}


----------



## Acer2000 (Sep 17, 2006)

ash369 said:


> Don't quite fully understand what exactly the issue is your trying to resolve? The center aligned text?
> 
> 
> ```
> ...


I'll give it a try. Thanks


----------



## axe0 (Jun 15, 2016)

Since we don't know the HTML, it's going to be very hard to do much. We really need to know the HTML.


----------



## Acer2000 (Sep 17, 2006)

Sorry, I forgot to post the link. Here it is Tryit Editor v3.6


----------



## axe0 (Jun 15, 2016)

I suspect you pasted code into a try editor from w3schools, it doesn't work like that as the changes are not stored in any way.

Upload the HTML file to service like onedrive, google drive, dropbox or similar and post a share link.


----------



## Acer2000 (Sep 17, 2006)

I prefer to paste the HMTL here but it is not working.


----------



## Acer2000 (Sep 17, 2006)

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta, title, CSS, favicons, etc. -->
<title>Home | My Personal Website</title>
<meta name="description" content="my keywords">
<meta name="keywords" content="description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Fonts --> 
<!-- Custom style -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wrapper homepage"> 
<div class="container">
<img src="images/logo.png" class="img-fluid" alt="Responsive image">


</div>

<div class="container text-center">
<h1>Choose your Language</h1>
<p class="lead text-black-50"><h2> <a href="http://mywebsite.tech/english.html">English</a> | <a href="http://mywebsite.tech/portugese.html">portugese</a></h2></p>
<p class="lead text-black-50"><h3>Link 1 | Link 2 | Link 3 | Link 4 </h3></p>
</div> 
</div>


<!-- Horizontal Line -->


<div class="col-xs-3"></div>

<!-- Footer -->
<section class="footer">
</section>
<p class="mb0 mt20">

<div class="pull-left fnav">
<p class="mb0 mt20"><p class="copyright">© 2020 My Website</p>
</div>

<div class="pull-right fnav">
<p class="mb0 mt20"> <p class="legal">Privacy Policy | User Agreement</p> 
</div> <!-- End of Footer -->

</body>
</html>


----------



## Acer2000 (Sep 17, 2006)

html {
height: 100%;
}

body {
background: #fff;
font-family: Century Gothic,
color: #808080;
}

}
@font-face {
font-family: Century Gothic;
src: url(../fonts/Gothic.ttf);
}


.container {
margin: 0 auto;
width: 60%;
text-align: center;
}

h1 {
display: block;
margin-top: 5.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 17px;
font-family: Century Gothic;
color: #FF7575;
}


h2 {
display: block;
margin-top: 0.45em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 50px;
font-family: High Tower Text;
color: #808080;
}

/* unvisited link */
a:link {
color: #808080;
}

/* mouse over link */
a:hover {
color: #FF7575;
text-decoration: none;
}

h3 {
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 18px;
font-family: Century Gothic;
color: #808080;
}




.footer {
padding: 2em;
}


.footer:after { /* this is the border */
content:"";
display: block;
width: 70em;
max-width:80%;
border-bottom: 1px solid #C0C0C0;
margin: 2em auto 0;
}


p.copyright {
padding-left: 500px;
font-family: Century Gothic;
font-size: 14px;
color: #808080;

}

p.legal {
font-family: Century Gothic;
font-size: 14px;
color: #808080;
padding-right: 500px;

}


----------



## Acer2000 (Sep 17, 2006)

Ok, as you can see, the text in the footer is not working properly when the page is resized.


----------



## axe0 (Jun 15, 2016)

I see you're using the container, but are not using it as a grid. That is a shame as it would really help in the problem.

A container can be used as a grid wherein you can quite easily add a 'table'. A table can have at most 12 columns and in each column you have a row which has smaller columns that accumulate up to 12, more is not supported. This is not the traditional HTML table, it is the following.
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">tets</div>
<div class="col-md-3">test</div>
<div class="col-md-3">test</div>
<div class="col-md-3">test</div>
</div>
</div>
</div>

That may help you. If you plainly copy/paste it, you will see it is responsive, you could use the structure or something similar to solve your problem.

I would recommend that you put the footer into the container and then you could turn the container into a grid.

I would like to note, I do not have much experience with bootstrap 4 and do also not know if using a grid in the footer is a good practice. It is, nonetheless, something to look into.


----------



## Acer2000 (Sep 17, 2006)

I'm learning Bootstrap slowly but I'm making progress every day. It's quite complicated.


----------



## Acer2000 (Sep 17, 2006)

It's difficult to find someone who can explain to to you as a newcomer how it works in simple terms. Most assume that you're an expert. I've seen several videos on YouTube and they all start with huge website projects. Not very helpful to someone new to this science. I'll keep at it.


----------



## axe0 (Jun 15, 2016)

I completely agree with you, Bootstrap has a lot of features and hidden powers.

I learned Bootstrap about 3 years ago when Bootstrap 4 was not available. I learned Bootstrap 3 with grids and panels, Bootstrap 4 replaced panels with cards and replaced some more elements, hence my comment. I did not spot the grid documentation in bootstrap 4, but an excellent video on Bootstrap grids is


----------



## Acer2000 (Sep 17, 2006)

Thanks, I'll watch the video asap. I was actually watching a video tutorial by Neil Rowe. Let me tell you what I've changed now. It did this in the CSS file: 

.col-sm-1 {
font-family: Century Gothic;
font-size: 14px;
color: #808080;
text-align: left; 

}

.col-sm-2 {
font-family: Century Gothic;
font-size: 14px;
color: #808080;
text-align: right; 

}

*and the HTML now looks like this:*

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta, title, CSS, favicons, etc. -->
<title>Home | My Personal Website</title>
<meta name="description" content="my keywords">
<meta name="keywords" content="description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Fonts --> 
<!-- Custom style -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wrapper homepage"> 
<div class="container">
<img src="images/logo.png" class="img-fluid" alt="Responsive image">


</div>

<div class="container text-center">
<h1>Choose your Language</h1>
<p class="lead text-black-50"><h2> <a href="http://mywebsite.tech/english.html">English</a> | <a href="http://mywebsite.tech/portugese.html">Portugese</a></h2></p>
<p class="lead text-black-50"><h3>Link 1 | Link 2 | Link 3 | Link 4 </h3></p>
</div> 
</div>


<!-- Horizontal Line -->


<div class="col-xs-3"></div>

<!-- Footer -->
<section class="footer">
</section>
<p class="mb0 mt20">

<div class="row">
<div class="col-sm-1" >Copyright 2020</div>
<div class="col-sm-2" >Privacy Policy | User Agreement</div>
</div>
</div>

</body>
</html> 

However, the end result should look like the attached







picture


----------



## axe0 (Jun 15, 2016)

I think this is close to what you're looking for.

You're on the right track with the grid, but put it in the container and wrap a larger column around the row to make it work.

```
<body>
    <div class="wrapper homepage">
        <div class="container">
            <img src="images/logo.png" class="img-fluid" alt="Responsive image">
        </div>
        <div class="container text-center">
            <h1>Choose your Language</h1>
            <p class="lead text-black-50">
            <h2> <a href="http://mywebsite.tech/english.html">English</a> | <a
                    href="http://mywebsite.tech/portugese.html">Portugese</a></h2>
            </p>
            <p class="lead text-black-50">
                <h3>Link 1 | Link 2 | Link 3 | Link 4 </h3>
            </p>
            <!-- Horizontal Line -->
            <div class="col-xs-3"></div>


            <div class="col-sm-12">
       
                <!-- Footer -->
                <section class="footer">
                </section>
                <p class="mb0 mt20">
           
                <div class="row">
                    <div class="col-sm-6">Copyright 2020</div>
                    <div class="col-sm-6">Privacy Policy | User Agreement</div>
                </div>
            </div>


        </div>
    </div>  
</body>
```


----------



## axe0 (Jun 15, 2016)

I changed the col-sm-1 and col-sm-2 because that's too small, if you try it you'll see that the text doesn't fit.


----------



## Acer2000 (Sep 17, 2006)

Thanks. I added my custom CSS and it looks better now but I think the Copyright and Privacy Policy need to come more to the inside.









*HTML*

<body>
<div class="wrapper homepage">
<div class="container">
<img src="images/logo.png" class="img-fluid" alt="Responsive image">
</div>
<div class="container text-center">
<h1>Choose your Language</h1>
<p class="lead text-black-50">
<h2> <a href="http://mywebsite.tech/english.html">English</a> | <a
href="http://mywebsite.tech/portugese.html">Portugese</a></h2>
</p>
<p class="lead text-black-50">
<h3>Link 1 | Link 2 | Link 3 | Link 4 </h3>
</p>
<!-- Horizontal Line -->
<div class="col-xs-3"></div>


<div class="col-sm-12">

<!-- Footer -->
<section class="footer">
</section>
<p class="mb0 mt20">

<div class="row">
<div class="col-sm-6 copyright">Copyright 2020</div>
<div class="col-sm-6 legal">Privacy Policy | User Agreement</div>
</div>
</div>


</div>
</div> 
</body>


*CSS: *

.copyright {
font-family: Century Gothic;
font-size: 15px;
color: #808080;
text-align: left; 

}

.legal {
font-family: Century Gothic;
font-size: 15px;
color: #808080;
text-align: right; 

}


----------



## Acer2000 (Sep 17, 2006)




----------



## Acer2000 (Sep 17, 2006)

This is how the footer text should display.


----------



## axe0 (Jun 15, 2016)

What browser are you using? I see something different.


----------



## Acer2000 (Sep 17, 2006)

How can I wrap a larger column around the row to make it work?


----------



## Acer2000 (Sep 17, 2006)

I use MS Edge.


----------



## Acer2000 (Sep 17, 2006)

It looks the same in Google Chrome


----------



## Acer2000 (Sep 17, 2006)

So how do I create something like this in Bootstrap? I can't seem to find anything even on the W3 Schools website


----------



## axe0 (Jun 15, 2016)

I'd imagine it would be something like this

<div class=col-md-12>
<div class=row>
<div class=col-md-3>
Contact us
</div>
<div class=col-md-9>
<!-- Line here -->
</div>
</div>
</div>

If you're also looking for that blue part, I would not know.


----------

