I am not able to find solution to aligning / organizing my div content with Bootstrap. I don't quite understand how it works
aling-items- *
text-*
aling-self- *
justify-items- *
justify-self- *
I am trying to organize my website in the following way:
but I am not able to align the contents so that it is completely joined to the left or right edges or so that the content is left, whether it be img, text or another div in the center of it. I would like to avoid using padding or margins since I am trying to make a responsive content and then they can give me other problems. Thank you very much for your help, greetings.
This may help you to get started:
fiddle to play-around
.MainDiv {
border: 1px solid red;
height: 210px;
width: 100%;
display: flex;
margin: 5px;
}
.First {
border: 1px solid blue;
width: 33%;
height: 200px;
display: flex;
justify-content: flex-start;
margin: 5px;
}
.FirstSubDiv {
border: 1px solid green;
height: 200px;
width: 50%;
}
.Second {
border: 1px solid blue;
width: 33%;
height: 200px;
display: flex;
justify-content: center;
margin: 5px;
}
.SecondSubDiv {
border: 1px solid green;
height: 200px;
width: 50%;
text-align: center;
}
.Third {
border: 1px solid blue;
width: 33%;
height: 200px;
display: flex;
justify-content: flex-end;
margin: 5px;
}
.ThirdSubDiv {
border: 1px solid green;
height: 200px;
width: 50%;
text-align: right;
}
<div class="MainDiv">
<div class="First">
<div class="FirstSubDiv">
contents are in left;
</div>
</div>
<div class="Second">
<div class="SecondSubDiv">
contents are in center;
</div>
</div>
<div class="Third">
<div class="ThirdSubDiv">
contents are in right;
</div>
</div>
</div>
All the information you require is provided here: https://getbootstrap.com/docs/4.5/layout/grid/
In the beginning, you can just copy and paste the boostrap html and tweak it. Gradually you'll get the gist of it (after test and trial) and you'll be able to work on it on your own.
EDIT
https://getbootstrap.com/docs/4.0/utilities/flex/
View the image attached. If that is what you're looking to do, visit this link
Related
I'm having problems with a behavior I have never seen before. I added the code because Stack Overflow is asking me to put it in my post but I would recommend you go on the Codepen to try it for yourself.
HTML:
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
CSS:
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
}
Here is an image with a hand drawn example of the behavior I expect/need: https://i.stack.imgur.com/2tWRH.png
Explanation: I don't want the red background to extend all the way to the X, I simply want it to wrap cleanly around the text of the div.
Just add the minimum content of width to your name class. As far as I know by reading your question I understand that you want to make the red background as it's needed.
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
width: min-content;
padding: 4px;
}
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
I'm starting out an application in angular and really struggling getting a basic layout setup; I have experience with angular but actual html/css design is completely new to me
Nothing I've tried seems to allow this container to take up the entirety of the screen. I have tried using multiple different settings on the html and container css classes and nothing will actually fit the container to the screen with width; but the height always seems to fit properly.
Aside from this flex-direction: row does not seem to consistently work. For example, I am trying to get the div "side" and the div "main" inside of the header div to fit next to each-other. Instead of this, those div's act like columns; despite the fact I have nowrap on; I have also tried display: inline-block and that also does not work. I have decreased the width of side and main in hopes that they would then fit next to eachother and that also does not work.
Screenshot:
Full View
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
flex-direction: row;
flex-wrap: nowrap;
}
.body {
border;
1px solid green;
height: 80vh;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
</div>
Firstly - there are quite a few typos in your code. You haven't closed the side class or the main class and there is no closing div for the side div.
Secondly - After I'd tidied up your code, I noticed that you were making the .container display: flex; when in fact you needed to make the .header display: flex; as this is the parent of the side and main divs.
This is a great guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This should work for you:
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
.body {
border: 1px solid green;
height: 80vh;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
</div>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
main is inside side. if you want them to be beside each other, you will need to arrange them as siblings within the flexbox.
you also forgot to add display: flex on the header css.
try this
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.body {
border: 1px solid green;
height: 80vh;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
</div>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
I'm having a bit of difficulty creating a rectangle that looks like this. I'm a novice, any help would be great!
This is what I'm trying to recreate:
I know how to make the rectangle, and I'm assuming you would split the rectangle into two sections, where one would use "table" to create the rows for Name, Diagnosis etc.
#box {
margin-top: 1%;
height: 20px;
width: 562px;
border: 1px solid black;
padding: 100px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: relative;
left: 0px;
}
.right-half {
position: relative;
right: 0px;
}
Solution
Flex grid <3 they are amazing
I have provided you three examples. Rows, columns and an additional example to show more properties of the flex box.
justify-content and align-items are amazing tools to align things quickly.
Example:
/*ExamplE box*/
.example {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row; /*Direction of flex*/
justify-content:center; /*horizontally aligns them to center*/
align-items: center; /*Vertically aligns them to center*/
}
.example__children {
width: 5px;
height: 5px;
margin: 0 5px;
border: 1px solid black;
}
/*Column box*/
.column {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.column__children {
width: 100%;
height: 25%;
border: 1px solid black;
}
/*Row box*/
.row {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.row__children {
width: 25%;
height: 100%;
border: 1px solid black;
}
<div class="example">
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
</div>
<div class="column">
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
</div>
<div class="row">
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
</div>
I want "About This Page" and "Around the web" to be horizontally aligned.
Also, open to any suggestions for improving this snippet of code. I just want to have a responsive / simple two column layout behind a wide colored background.
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
I would recommend using flexbox for this, which can be achieved by simply adding:
.container {
display: flex;
align-items: center;
justify-content: center;
}
If you want to have both boxes occupy the same height, you'll need a fixed height on .footer-links and .built-with. I've gone with 150px in the following example:
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Flexbox has support in every browser apart from Internet Explorer (though it's coming to IE as well). If you'd like to support Internet Explorer as well, you can use vertical-align: middle along with display: inline-block, as is demonstrated in this answer.
Hope this helps! :)
Simply use flex. Read about it here
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
display: inline-flex;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Use table-cell as display property
.footer-links,
.built-with {
display: table-cell;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
I think , it'll horizontally aligned these boxes
this is based off of obsidian ages answer since it wasn't updated to match my exact question.
I edited .footer-above to 1400px since width:100% with code doesn't scale as viewport width changes.
Also, it should be align-items: flex-start; on container class, since i want a baseline at the top of parent div
.footer-above {
width: 1400px;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 960px;
display: flex;
align-items: flex-start;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
I've been using flex layouts for a while now.
mainly the holy grail type layout and it works well.
Today decided to try create the same thing to help me learn more about flexbox.
but using columns on the right side for sidebar area, and rows as the logo/heading and page div's.
I've put this in a codepen so you can see the markup code yourself.
my issue is the logo/heading and main page when set to row pushes the columns downwards.
<div class="wrapper">
<div class="nav">logo content and site banner goes here
<div class="spacer">
</div>
<div class="content">main page content goes here</div>
</div>
<div class="one">page index goes here</div>
<div class="two">twitter logo goes here</div>
<div class="three">chatbox goes here</div>
</div>
div {
box-sizing: border-box;
}
.wrapper {
border: 2px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
position: relative;
}
.nav {
flex-direction: row;
border: 2px solid green;
width: 100%;
height: 100px;
align-self: flex-start;
padding-left: 8px;
margin-bottom: 4px;
}
.spacer {
height: 140px;
width: 100%;
}
.content {
flex-direction: row;
border: 2px solid green;
height: 40px;
padding-left: 8px;
align-self: flex-start;
}
.one {
width: 200px;
height: 200px;
border: 2px solid red;
flex-grow: 0;
padding: 8px;
}
.two {
width: 200px;
height: 200px;
border: 2px solid red;
flex-grow: 0;
padding: 8px;
}
.three {
width: 200px;
height: 200px;
border: 2px solid red;
flex-grow: 0;
padding: 8px;
}
https://codepen.io/anon/pen/GmZWvp
even if setting the width to something smaller before it even reaches the columns
the block pushes the columns, down, how could i do this where it doesn't effect the column on the right?
I know i could position: absolute the main page div, or create a nested div in logo/heading
and give it height of say 120px; to get it to go below the logo heading.
But there must be a way of putting a row next to a column without it pushing the column down.
since the div/row for the logo heading/main page is a block element.
If you know how to do this please let me know what to change, where and why etc.
Again this isn't for production, it's just to see if I can solve this quirky puzzle.
First, even if you set display: flex on the wrapper, you can't set flex-direction: row (or column) on its children to change their direction. The flex-direction property should be set on the flex container, in this case the wrapper. If you want to change direction on flex items belonging to one flex container, you need to wrap them and make that nested wrapper be both a flex item and a flex container, here done with the side wrapper in my first sample
If you rearrange your markup a little, you can get this
div {
box-sizing: border-box;
}
.wrapper {
border: 2px solid blue;
display: flex;
}
.nav {
border: 2px solid green;
width: 100%;
height: 100px;
padding-left: 8px;
margin-bottom: 4px;
}
.content {
flex: 1;
border: 2px solid green;
height: 40px;
padding-left: 8px;
}
.side {
width: 200px;
}
.one {
height: 200px;
border: 2px solid red;
padding: 8px;
}
.two {
height: 200px;
border: 2px solid red;
padding: 8px;
}
.three {
height: 200px;
border: 2px solid red;
padding: 8px;
}
<div class="nav">logo and site banner goes here</div>
<div class="wrapper">
<div class="content">main page content goes here</div>
<div class="side">
<div class="one">page index goes here</div>
<div class="two">twitter logo goes here</div>
<div class="three">chatbox goes here</div>
</div>
</div>
If you can't, or don't want, to change markup, then you need to combine flexbox with absolute positioning.
div {
box-sizing: border-box;
}
.wrapper {
position: relative;
display: flex;
flex-direction: column;
}
.nav {
border: 2px solid green;
width: 100%;
height: 100px;
padding-left: 8px;
margin-bottom: 4px;
}
.content {
width: calc(100% - 200px);
border: 2px solid green;
height: 40px;
padding-left: 8px;
}
.one, .two, .three {
position: absolute;
right: 0;
width: 200px;
height: 200px;
border: 2px solid red;
padding: 8px;
}
.one {
top: 104px;
}
.two {
top: 304px;
}
.three {
top: 504px;
}
<div class="wrapper">
<div class="nav">logo and site banner goes here</div>
<div class="content">main page content goes here</div>
<div class="one">page index goes here</div>
<div class="two">twitter logo goes here</div>
<div class="three">chatbox goes here</div>
</div>