I'm fairly new to bootstrap and having trouble with nesting. I've got a layout that I'm trying to recreate and not getting the correct result seen here layout image.
My code http://www.bootply.com/0BETlZMU7T
<div class="container-fluid">
<div class="row">
<div class="col-md-4">image with image text here</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">A Text</div>
<div class="col-md-6">B Text</div>
</div>
<div class="row">
<div class="col-md-6">Y Text</div>
<div class="col-md-6">Z Text</div>
</div>
</div>
</div>
</div>`
vertical align isn't possible with default bootstrap, but you can achive it with code showed in this solution
vertical-align with Bootstrap 3
Your updatetd html would look like the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">image with image text here</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">A Text</div>
<div class="col-md-6">B Text</div>
</div>
<div class="row">
<div class="col-md-6">Y Text</div>
<div class="col-md-6">Z Text</div>
</div>
</div>
</div>
</div>
And your CSS like:
/*From:
https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3#answer-25517025
*/
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
/**
* "flex: 1" or "flex-grow: 1" is added to make the inner div
* - Which is also a flex-item - take up all the horizontal space
* available space inside the flex container (.col-* elements)
*/
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
/* flex: 1; */
flex-grow: 1;
}
I made you an example with your code and I merged the Items "A,B,X,Y" into one row, because you don't need this second row.
http://www.bootply.com/uIVbiDLGkj
Related
.container {
display: flex;
justify-content: left;
}
.containertwo {
display: flex;
justify-content: right;
}
.center {
text-align: center
}
<div class="container"> //component1
<div class="one">some content</div>
</div>
<div class="center"> //middle component
<div class="middle">middle content</div>
</div>
<div class="containertwo"> //component2
<div class="two">some content</div>
</div>
I have three components namely, component1, component2, middlecomponent.
All these components are loaded in app.vue. And I am able to, load all the components into one components called App.vue.
But coming to css wise. Not sure how to align them using flexbox properties in css?
You need change your structure. the container should be flex and for alignment you can use align-items:center, also I set a gap between components.
there is no need to those class you have written.
this link can help you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
align-items: center;
gap: 40px;
}
<div class="container">
<div> //component1
<div class="one">some content</div>
</div>
<div class="center"> //middle component
<div class="middle">middle content</div>
</div>
<div class="containertwo"> //component2
<div class="two">some content</div>
</div>
</div>
How can I go about splitting the screen like in the screenshot? The website in the screenshot is mine and I've designed it in Elementor but now I want to code it. How can I do that with css and maybe Boostrap?
Visit mateusrdesign.com to check it for yourself.
Screenshot
Screenshot #02 (notice how the screen is smaller and there is no horizontal scroll bar
Here's what I've tried:
<div class="container">
<div class="row">
<div id="left" class="col-3">
<p>Place holder</p>
</div>
<div id="right" class="col-9">
<p>Place holder</p>
</div>
</div>
</div>
You can achieve this with a flex box:
.row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.row #left {
background: yellow; /** Just to emphasize vertical split visually. You can remove this */
width: 50%;
}
.row #right {
background: green; /** Just to emphasize vertical split visually. You can remove this */
flex: 1;
}
<body style="height: 100vh;">
<div class="row w-100 h-100">
<div class="col bg-info">Left side</div>
<div class="col bg-dark">Right side</div>
</div>
</body>
This is one of the bootstrap way. Dont forget to import bootstrap cdn to html.
I am trying to have a the last div in the row wrap within itself before it gets wrapped to the next line.
<div class="flexcontainer">
<div class="col1">this is text</div>
<div class="col2">this is text</div>
<div class="col3">
<div class="contents m1">This is some other text</div>
<div class="contents m2">This is some other text</div>
<div class="contents m3">This is some other text</div>
</div>
</div>
.flexcontainer{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.col3{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.contents{
display:inline-block;
}
Here's the code of what im working on.
jsfiddle example
Here's the simplified code like I posted
I'm not exactly sure what I did before. I was able to create a 3 column flex container where the last child would wrap within itself before it's container wraps, but I can't seem to find the solution on how i did it previously.
I hope this is what you are expecting -"makes child div wrap before its flexbox container wraps.".
use flex :shrink | wrap | basis property and flex-wrap property to wrap the div contents.
.flexcontainer {
display: flex;
flex-direction: row;
background-color: lightgrey;
flex-wrap:wrap;
}
.flexcontainer>div {
flex: 1 1 0;
}
.col3 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: red;
}
.contents {
display: inline-block;
}
<div class="flexcontainer">
<div class="col1">This is text</div>
<div class="col2">this is text >> IT WILL BREAK AFTER HERE | | | </div>
<div class="col3">
<div class="contents m1">This is some other text</div>
<div class="contents m2">This is some other text</div>
<div class="contents m3">This is some other text</div>
<div class="contents m3">This is some other text</div>
</div>
</div>
I think the .col3 className is duplicate in the container element.
If you remove it, it should make the content 3 columns.
I'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
Is there a way that I can make the nested columns height equal the row height? Currently they only equal 75% of the row height. I have tried setting the column height vs css, but that doesn't seem to work either.
<body>
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="row">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-md-12">
<h1>Current Visitors</h1>
<h2>0</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Online Orders</h1>
<h2>00</h2>
</div>
</div>
</div>
<div class="col-md-8">
Grid Here
</div>
</div>
</body>
I think you are looking for something like this? https://jsfiddle.net/0cL2qaq1/3/
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}