hi i have small problem when i resize my window i get at last BOOTSTRAP BREAKPOINRT wraping DIV is there any fix for it ? adding ROW doesnt helps =\
LIVE Prewiew : http://nekonomagic.sk/stylmejker/pages/uvod.php
Prewiew
HTML Code :
<div class="col-md-12" id="no-wrap">
<div class="row col-md-1" id="slider-span">
<span class="fa fa-arrow-left"></span>
<span class="fa fa-arrow-right"></span>
</div>
<div class="col-md-4" id="slider-pagin">
<ul class="pagination">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
</div>
</div>
For an instant solution, you can try this media query.
#media only screen and (max-width:990px){
#no-wrap {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
#slider-pagin{
top:0;
}
}
Related
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.
So I was trying to line-break my 2 anchors that i did using the <a> tag. They are inside a flip box.
Basically right now I have my 2 anchors inline but the problem is that I'm using flexbox on the container and I'm not really sure how I could break the 2nd anchor so it would be below my 1st anchor.
My HTML code : Codepen Link
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; align-items: center; justify-content: center;" class="flip-box-back">
<i class="fas fa-download"></i>
<a href="#" download>download</a>
<hr>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
I alreay tried the <br> and <hr> on HTML but without success.
Example :
Thank you in advance, would be very grateful
You should add flex-flow: column; to your div which wraps your buttons
div {
display: flex;
flex-flow: column;
}
<div>
<button>1</button>
<button>2</button>
</div>
In your case you have to wrap each link and including the icon inside an element such as a div. Otherwise your icon and div will be placed all below each other and not just the 2 "buttons".
Then you can place each wrapped element by adding flex-direction: column;
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;" class="flip-box-back">
<div>
<i class="fas fa-download"></i>
<a href="#" download>download</a>
</div>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
Normally a flexbox is no-wrap so you need to add a property to let it break if there is no space left for 2 elements (also you can define the horizontal alignment to centered with justify-content) :
.flexbox{
display: flex;
}
.flexbox2{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flexbox3{
display: flex;
flex-direction: column;
align-items: center;
}
button{
width: 60vw;
}
Default:
<div class="flexbox">
<button>Button1</button>
<button>Button2</button>
</div>
With (auto) wrap:
<div class="flexbox2">
<button>Button1</button>
<button>Button2</button>
</div>
With forced wrap (column view):
<div class="flexbox3">
<button>Button1</button>
<button>Button2</button>
</div>
I have 4 columns in a row that become 1 column on mobile. The way this looks on mobile is fine, but I want to center the content in divs 2 and 4 in each row. What would be the best way to do this?
Apparently my edit was deleted or the site messed up, but I had said I want to do this vertical and horizontal. However, it was my fault I forgot to link to the page. Sorry, guys. - http://www.dismantledesign.com/testsite2/clients.html
Edit: I appreciate all the answers, but I don't think anyone understands that this div has no set height. I just want that text and icons to stay centered as the screen moves. The flex didn't seem to work because it required setting a height to the div.
I also simplified my HTML
Code
.clientsdetail {
text-align: center;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.clientinfo h3 {
padding-top: 10px;;
}
.clientinfo p {
padding: 0px 30px;
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 nopadding">
<img class="img-responsive" src="img/clients/ivey.jpg">
</div>
<div class="col-md-3 nopadding cinfo">
<div class="clientinfo text-center">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
<div class="col-md-3 nopadding cinfo">
<img class="img-responsive" src="img/clients/rufus.jpg">
</div>
<div class="col-md-3 nopadding">
<div class="clientinfo text-center">
<h3>RUFUS DAWKINS</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
</div>
You can use flex properties to make your content to center.
for more details, you can check
Flexbox: center horizontally and vertically
(UPDATED)
You can use the Pseudoclass to select the 2 and 4 div.
.row div:nth-child(2n) {
/* Your CSS Style */
}
If the content inside the 2 and 4 div are inline/inline-block, just use text-align: center;.
Demo
Here is the simple demo for the pseudoclass.
.row > div {
padding: 10px;
}
.row > div:nth-child(2n) {
color: #fff;
background: red;
text-align: center;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
Hope this is helpful for you.
Thanks.
Try a different approach. Bootstrap's floating grid system will not get you where you want.
First, remove row and col- classes so you have something like this:
<div class="my-row">
<div></div>
<div></div>
<div></div>
</div>
Then use CSS to achieve the same result as before, but with the content aligned center:
#media (min-width: 992px) {
.my-row {
display: flex;
align-items: stretch;
}
.my-row > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
If you are using SASS, then replace hardcoded 992px with the #screen-md-min variable.
Here's a JsFiddle of your simplified example:
https://jsfiddle.net/mpnz9b30/1/
<div class="col-md-6 nopadding cinfo">
<div class="clientinfo">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<a href="https://twitter.com/contracoda" target="_blank">
<span class="icon-sprite sprite-tw"> </span>
</a>
</div>
</div>
</div>
I'm pretty new to HTML and CSS so perhaps this is a crazy easy question to answer.
The question is:
How to do this using only divs and css?
I don't want to use <table> <tr> <th> <td>....
Here's a basic setup of what you're asking using the flexbox property.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Read more about it at MDN and experiment with it so you feel comfortable using it. The setup might not be pixel perfect, but it gives you a good start for the desired layout. Trial and error, that's the best way to learn.
div {
box-sizing: border-box;
border: 1px solid black;
min-height: 20px;
}
.container {
display: flex;
flex-flow: row-wrap;
width: 100%;
}
.column {
flex: 1 1 100%;
}
.middle {
flex-basis: 200%;
}
.middle-top,
.right-top,
.right-bottom {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.language,
.search,
.login,
.signup,
.some-text,
.avatar {
flex: 1 1 50%;
}
<div class="container">
<div class="column left">
<div class="social">
Social icons
</div>
<div class="logo">
Logo
</div>
</div>
<div class="column middle">
<div class="middle-top">
<div class="language">
Language
</div>
<div class="search">
Search
</div>
</div>
<div class="slogan">
Slogan
</div>
<div class="menu">
Menu
</div>
</div>
<div class="column right">
<div class="right-top">
<div class="login">
Login
</div>
<div class="signup">
Signup
</div>
</div>
<div class="right-middle">
Welcome guest
</div>
<div class="right-bottom">
<div class="some-text">
<div class="something">
Some text
</div>
<div class="something">
Some text
</div>
</div>
<div class="avatar">
Avatar
</div>
</div>
</div>
</div>
im trying to use bootstrap for a site, but what i am trying to achieve to have to columns within a row col-sm-6. Where i want one column to be in an ordinary container and the other to have container fluid effect.
So it would one column as normal and the other column as full width. So far this has been difficult to do:
<div class="container">
<div class="row">
<div class="col-sm-6 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
http://jsfiddle.net/8fyjtn09/
i think i figured it out, instead of using a normal container i would have to use container fluid as i said before but just an offset
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-2 col-xs-4 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
Do you know flex-box layout in CSS ?
As i understand your question, i believe that on wider screens you want to have first column fixed and second column should be responsive. And for a smaller screen you want the default bootstrap behaviour. If this is what you are looking for, i have created a simple fiddle. Please check that and let me know if this is helpful.
Here is the link : https://jsfiddle.net/YameenYasin/7zaxx06z/23/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="row flexbox">
<div class="first">
</div>
<div class="second">
</div>
</div>
</div>
.flexbox {
display: -webkit-flex;
-webkit-flex-flow: row; // Children elements will be in rows
-webkit-flex-wrap: wrap;
width: 100%;
}
.first
{
border:1px solid red;
height:50px;
width:200px;
}
.second{
border:1px solid green;
width:100%;
-webkit-flex: 1;
height:50px;
}
#media (max-width: 767px) {
.flexbox {
-webkit-flex-flow: column;
}
.first,.second{
width:100%;
}
}