I'm creating a simple 2 column layout. The left column should be narrow and contains a vertical navigation bar, the right column will contain the main content of the site. I'm using bulma-css columns to create this layout.
The problem that I'm encountering is that depending on the horizontal windows size, part of the right side of the second column is falling off the page. So this column is not scaling appropriately.
Below is a minimal example that illustrates the problem. Depending on window size the button will (partially) fall off the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-narrow">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<div class="container">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
</div>
</body>
Good expected behaviour:
Bad:
Actually the problem is your .container class in the second column which has a width...better or remove it and use .is-one-third class in the first column to make it smaller or other [bulma grid column classes]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="columns is-mobile">
<div class="column is-one-third">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
</div>
</div>
</body>
</html>
On bigger screen you can see 2 and 3 columns respectively but in print view why every col is in new line ?
because Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with a flexbox and is fully responsive.
in my case i have to use 5 col-md for one row and another col-md needs to go next row without open row.
i tried with nth:child and its not help for me please help me to fix this issue
Please click full page on snippet to better view
.col-md:nth-child(5){
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
</div>
</div>
</body>
</html>
You can simply do it by set flex-basis to 20%.
.col-md {
flex: 0 0 20%;
}
The issue is that you are using seven containers. You need six. The next thing, you have to attach the correct class for the last container (100%). Which is col-md-12. You won't need any additional CSS. Everything you need is supported by Bootstrap. Please revisit the Bootstrap documentation on how layouting works!
As an additional information col-md occupies as much space in width as is available (evenly distributed between all elements/containers in a row).
The below example demonstrates how you can do that.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: green" class="col-md-12">
this is next row
</div>
</div>
</div>
</body>
</html>
Update: You can also do it like that without col-md-12.
.col-md:nth-child(5){
flex: 0 0 100%;
}
To stretch the col-md at position 5 to 100%.
You need to allow the wrap then control the flex-basis
.col-md:nth-child(n + 6) {
flex-basis:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row flex-wrap">
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
</div>
</div>
I have the following code. I want to resize my image, but it doesn't work with col-xs-offset-0. (I want to center it)
What could be the problem here? I want my image to get big with col-xs and centered.
I don't want to use col-xs-4 since it'll make my image too small. I can't col-xs-5 because then I can't use offset.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-0">
<img class="img-responsive" src="http://www.turkcealtyazi.org/images/poster/0903747.jpg" alt="">
</div>
</div>
</div>
<script src="/js/jquery-2.1.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Fiddle : http://jsfiddle.net/rx4ptj2k/
An offset of zero would only be appropriate if you had a width of 12. As it's 6 columns wide, you'd divide the remainder of the 12 in half for a result of 3.
Use col-xs-offset-3 instead of col-xs-offset-0.
Demo
I'm trying to create a simple HTML document that has two main divs - the first one has a background image w/a background size of cover so that the image takes up the entire top portion of the screen, the second div is directly beneath the first div and contains an img tag.
This seems simple enough, but when I apply a background:url style to my first div, scrolling down causes my second div image to overlap the background image of the first div. I expected this so I set a height property in my first div and this has no effect.
How do I make the first image cover the first div but not have the second one overlap it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="font-family: 'lato'; font-size:18px;">
<div class="container-fluid">
<div style="background:url('http://www.screensavergift.com/wp-content/uploads/2011/01/BeautifulLakeView1.jpg') no-repeat center center fixed; background-size:cover; height:1100px" class="row">
<div class="row">
<div style="margin-top:20px" class="text-right col-xs-offset-1 col-xs-10">
Login | Sign Up
</div>
</div>
<div class="row">
<div style="background-color:rgba(62,83,78,0.2); margin-top:10px" class="text-center col-xs-offset-1 col-xs-10">
<span style="color:white; font-size:40px;">
Join us in God's country!
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<img src="http://www.ynaija.com/wp-content/uploads/2014/05/Bird.jpg" alt="Cyrillic alphabet" />
</div>
</div>
</div>
</body>
</html>
See an example of what I'm trying to do here:
http://jsfiddle.net/y0oL6k4d/
Just trying to create simple template, but dont know why text going out of div. here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
#include('qhymchildz.includes.head')
</head>
<body>
<div id="container">
<div id="header" class="panel">
ini headersssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<div id="main" class="row">
<div id="content" class="medium-10 columns panel">
<p>contentssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>
<div id="sidebar" align="left" class="medium-2 columns panel">
<p>salfjasjf;lajfja;jsfl;;asjf;lawoierwruowirowuriowrowrowurioweruiowrowerowurowuriowrowrowuroirour</p>
</div>
</div>
<div id="footer" class="panel">
ini footer
</div>
</div>
</body>
</html>
and here is the result
http://prntscr.com/5nwn5l
How to fix it ?
Thanks in advance.
Sorry as i cannot comment due to low reputation but is it possible to see your CSS code used as that would help alot.
At first sight it could be fixed by using word-wrap: break-word since you are using a solid line of text rather than that of one with spaces. if not that it may be an overflow-x issue. it may also be that if you are using a grid template as would be suggested by columns and rows, it may be an issue with that code that affects how the long string of text responds to lack of room.
Try breaking up that text into real words or some Lorem Ipsum
Really i would need to see your CSS, thanks.