Posts

Showing posts with the label bootstrap-4

Align Div in the midle of the screen [duplicate]

Image
Align Div in the midle of the screen [duplicate] This question already has an answer here: Well I have my background (red border) and my login div (blue border) I want to make my login div stay in the center of the screen. I'm using this code for this: HTML CODE ... </div> CSS CODE .login-background{ width: 100%; height: 100%; margin: 0; padding: 30px; position: fixed; background: #eee; overflow: hidden; border: solid red; } .login{ margin: auto; padding-bottom: 25px; background-color: #dcf8c6; boder: solid blue; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.54); -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.54); box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.54); } But this isnt work for me. Look my screen: How I can put this div in center (verticaly and horizontaly) on my screen? This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new que...

HTML/CSS/Bootstrap | Bootstrap Navbar

Image
HTML/CSS/Bootstrap | Bootstrap Navbar I'm newish to programming and brand new to HTML. Currently doing a class assignment for my Web Development class where we are making a web page for a fictional company called "DW Gift Company." One of the project requirements is a navbar at the top (not fixed) that leads to a few different sub-pages (About, Items, Order, etc.). However, I'm stuck on the navbar part and can't seem to get the navbar to look right. Here's my code below. I've got the nav tag with what I'm fairly sure are the correct classes along with ul's and li's (I know ul is an un-ordered list but I'm not 100% sure what li is. I'm following an online vid from my prof and I'm Germ X level(99.9%) sure I've followed along right and typed exactly what he has but mine looks nothing like his(I've attached what its supposed to look like and what mine looks like as well as what he has). My code: <html> <head> ...

extend bootstrap 4 margin sizing

extend bootstrap 4 margin sizing I'm using bootstrap 4 with sass( scss file ), and want to apply .mx-2 class properties into a new class. theorytically some thing like: scss file .mx-2 .MyCustomClass{ @extend .mx-2; } But apparently, compiler cannot find .mx-2 selector and it fails. I know that mx-2 class created by using mixture of $size , $length , $spacers , $breakpoint etc... So i changed it: .mx-2 mx-2 $size $length $spacers $breakpoint .MyCustomClass{ margin-left: ($spacer * .5) !important; margin-right: ($spacer * .5) !important; } I'm wondering to know: .5 .mx-lg-2 1 Answer 1 "But apparently, compiler cannot find .mx-2 selector and it fails." It should work, but you need to @import "bootstrap" first. Any @extend should be after the import... @import "bootstrap" @extend @import "bootstrap"; .MyCustomClass{ @extend .mx-2; } Demo: ...

Installing Bootstrap with NPM

Installing Bootstrap with NPM I know how to use npm to install and maintain build tools, but I realize I'm not sure how to leverage it to install frameworks (css or js I'd normally just slap the script/css links in my index.html). But, let's say I want to use npm. I'd run an npm install bootstrap and npm install jquery , but then I'm not sure what the next step is. npm install bootstrap npm install jquery I could then just say <link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css"> but that seems clunky and dumb. <link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css"> I see a lot of people importing stuff like this with require('bootstrap'); but honestly I'm not even sure where to put that. require('bootstrap'); Could somebody help me fill in these blanks? You could use a grun...