Jump to content

HTML Too noob to fix BOOTSTRAP button text and border size

suha04

Hello guys!


I've started programming a new project that I have to finish before Tuesday, and since I only have about 1 year expertise in basic coding, I tend to fail, and I need a little help. 

Here's the problem,: I'd like to make a front page to my site, with BOOTSTRAP buttons, and I'd like to fix their size on the page, so they can't be manipulated with Zooming-in or out. I managed to fix everything on the page so far, using percentage-sizes, but at the buttons, I can only fix the box, the border and the font size can be manipulated. I know that the border can't be sized with percentages, but I have no idea how to change them. Please, would someone help me out?

 

Here's the HTML code for one of them:

 

<button type="button" class="Buttons" class="Buttontext" id="Button1">Placeholder</button>

 

CSS:

 

.Buttons

{

display: block;

position: Fixed;

margin-top: 0.4%;

border-radius: 0px 0px 0px 0px;

background-color: black;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

border-color: rgb(184, 8, 90);

border-width: 3px;

height:6%;

width:13%;

}

 

.Buttontext

{

    font-size: 30px;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

 

#Placeholder

{

    left: 27%;

}

 

Thanks!

Link to comment
Share on other sites

Link to post
Share on other sites

1.Just use border: 3px solid violet;

where 3px is the border-width

solid is border type

violet is color (can be a hex code , RGB , HSL etc)

 

2. If I am not wrong using percentage-size is really bad.

did you checked how your site looks in other devices.(ik bootstrap is responsive and all but if you hardcoded percentage sizes it won't be responsive)

 

3. small tips

- use lower case while naming classes

- you can group class name

class = "class1 class2" like this

- default border radius is 0px no need to specify it.

- STOP USING PERCENTAGE VALUES

image.png.716be800ee2b46bd64e5a2b14117d9a8.png

 

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×