To illustrate the problem better, here's the video and jsfiddle.
<div class="container-fluid">
<div class="container">
<img src="https://image.com"/>
<h1>lorem ipsum dolor</h1>
</div>
While window has certain width, one part of text goes under the image and another stays next to it. How can i prevent text from dividing, so when window reaches this certain width, the whole phrase "lorem ipsum dolor" appears under the image and not just "dolor"? I'm using bootstrap, is there any special <div> class dedicated to this thing? putting text in container or content doesn't solve the problem.
I hope this is helpful.
body {
background-image: linear-gradient(to bottom right,#09845A, #8733DD);
}
.flex {
display:flex;
justify-content:center;
}
#media screen and (max-width:728px) {
.flex {
flex-direction:column;
align-items:center;
}
.img {
background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
width:100px;
}
}
.img {
background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
height:92px;
width:272px;
}
.container-fluid {
background: rgba(0,0,0,0.75);
}
.container {
display:block;
overflow:auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="flex">
<div class="img"></div>
<h1>
Ulecz się rozmową
</h1>
</div>
</div>
</body>
This should help.
https://www.w3schools.com/code/tryit.asp?filename=FY3DOVSFM4MZ
basically you need to give col-sm-12 this tells that at smalls screens make this item full width.
Why don't you try using columns instead like this.
<div class="container-fluid">
<div class="container">
<div class="col-md-6 col-sm-12 col-xs-12">
<img src="https://image.com"/>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>lorem ipsum dolor</h1>
</div>
</div>
Related
My h1 only aligns to the center of the screen if it has enough text underneath it. Otherwise, it will align wrong/not at all. How do I fix this?
.content {
margin-top: 60px;
text-align: center;
}
body {
background-color: #a8a8a8;
}
.textbox {
background-color: white;
padding: 20px 100px 100px 100px;
}
<div class="container textbox">
<div class="row">
<div class="col-xs-12 content">
<h1>Contact</h1>
</div>
</div>
</div>
Here are my screenshots of what happens in each situation I mentioned:
No text underneath the h1
A bit of text underneath the h1
Enough text underneath the h1 (the h1 finally aligns properly)
There's absolutely no need for any custom css for simple things of this nature in Bootstrap 4. The text-center class is what you want for your h1.
Also, the col-xs-* class doesn't exist in Bootstrap 4 anymore. It's just col-* now.
Here's a working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center">Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</div>
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
Sorry if the title is little bit misleading.
What I'm trying to do is to cover my background of index page with really light grey except for the section that displays my contents.
<div class="col-sm-1">
</div>
<div class="col-sm-8">
</div>
<div class="col-sm-3">
</div>
I want col-sm-8 to be the only white, and rest to be all grey.
I can make col-sm-8 grey using css, but how do I do the opposite?
Try this
[class*="col-"] {
background : grey;
}
.col-sm-8{
background: white;
}
well, what [class*="col-"] selector do is that it will give grey background to the values of class attributes begin with col-
You can style individual classes by writing its full class name.
Instead of bootstrap class put your own style(inline-css)
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container bg-info">
container <br/>container <br/>
<div class="col-sm-1 bg-warning">
k
</div>
<div class="col-sm-8 bg-success">
k
</div>
<div class="col-sm-3 bg-warning">k
</div>
container <br/>container <br/>
</div>
You can use selector like [class*="col-"]:not(.col-sm-8)
[class*="col-"]:not(.col-sm-8){
background-color:grey;
}
<div class="col-sm-1">1
</div>
<div class="col-sm-8">2
</div>
<div class="col-sm-3">3
</div>
Either using the inline designing you can use
<div style="color:#0000FF"> //use the div name
or else you can use css to design it
[class*="col-"] {
background : grey;
}
.col-sm-8{
background: white;
}
You can also style elements individually.
.col-sm-1{
width:100%;
height:100px;
background:grey;
}
.col-sm-8{
width:100%;
height:100px;
background:white;
}
.col-sm-3{
width:100%;
height:100px;
background:grey;
}
But if your using entirely bootstrap in your project you have to avoid giving styles to bootstrap builtin classes.
I think you want like following.
You can do opposite this way.
div:not(.col-sm-8){
background-color:grey;
}
<div class="col-sm-1">test1
</div>
<div class="col-sm-8">test8
</div>
<div class="col-sm-3">test3
</div>
Or Use following using class selector.
[class*="col-sm-"]:not(.col-sm-8){
background-color:grey;
}
<div class="col-sm-1">test1
</div>
<div class="col-sm-8">test8
</div>
<div class="col-sm-3">test3
</div>
Working Fiddle
Read more about :not here.
I believe the answer provided by Jinu Kurian sounds like the answer that you want but in case the answer is that you want everything light grey and col-sm-8 with a background of white. This should work.
.container {
background-color: grey;/*Replace this with a hex color value of a light grey to your preferance*/
}
.col-sm-8 {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-1">
<p>Lorem ipsum sit amet</p>
</div>
<div class="col-sm-8">
<p>Lorem ipsum sit amet</p>
</div>
<div class="col-sm-3">
<p>Lorem ipsum sit amet</p>
</div>
</div>
I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>