Sorry for tell this in Stackoverflow. I have sinned. Sorry but I cannot get an element centered and the tag makes everything work like a charm. As you can guess I am not very fluent in CSS. Can anyone see a better way to do it?
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"><img alt="Logo" src="./images/logo.png">
</div>
<div class="col-lg-8">
<center><span> text to center</span></center>
</div>
<div class="col-lg-1">
<span element></span>
</div>
</div>
</div>
Thanks
Bootstrap has its own "text-center" class. If you apply it to your .col-lg-8 tag, it would allow you to remove that center tag.
It would look like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"><img alt="Logo" src="./images/logo.png">
</div>
<div class="col-lg-8 text-center">
<span> text to center</span>
</div>
<div class="col-lg-1">
<span element></span>
</div>
</div>
</div>
Related
In order to replicate my problem, I wrote a simple HTML with 2 bootstrap columns, I would like my second column to have multiple <p> items , each one of them below the other, however the issue arises when the strings contained in the <p> tag are of different lengths, since I want them to be in the center of the column but to also start in the same position relative to the X-axis.
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6">
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
Essentially I would like the string "A much longer text" to be exactly below "Small text", so that it would look this way:
Small text
A much longer text
Instead of
Small text
A much longer text
I tried styling the column with text-align:center as well as using flexbox and align-items:center but they both produce the same result.
first you need to add a d-flex justify-content-center classes to your column then add a div parent to your p tag so your code will be like that
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6 d-flex justify-content-center">
<div>
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
</div>
Using the bootstrap 4 flex box should solve the issue. On running the code below, you would find that bootstrap responsiveness is placing the col-md-6 in 2 lines. Running code outside stack overflow should give the result you desire.
Edit: Added some javascript code to center the text as per the comments from the OP
$( document ).ready(function() {
let divLeft = $('#div-center-text').position().left;
let min = 0;
$('.center-text').each(function(i, obj) {
let p = $(obj);
let pLeft = p.position().left;
if (min==0 || min>pLeft)
min = pLeft;
});
$('.center-text').each(function(i, obj) {
$(obj).offset({left: divLeft + min});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 border">
Some unrelated text
</div>
<!-- .col-md-6 -->
<div class="col-md-6 border" id="div-center-text">
<div class="d-flex flex-column align-items-center w-100">
<p class="mb-0 center-text">Small text</p>
<p class="mb-0 center-text">A much longer text</p>
</div>
<!-- .flex-column -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</body>
</html>
Using bootstrap reslove your issue, you can align content in center ofthe page horizontal.
try below example.
<div class="pricing4 bg-light" style="margin-top: -20px;padding-bottom: 25px;margin-bottom: -32px;">
<div class="container">
<!-- Row -->
<h2 style="text-align: center;padding: 40px;">This is improper content (div)</h2>
<div class="row justify-content-md-center">
<!-- Row -->
<div class="row justify-content-md-center" style="margin-left: 30px;margin-right: 30px;">
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I'm trying to create a layout similar to the one pictured above at the top of my page. Im using bootstrap 4, and I've created the appropriate row and column arrangement
<div class = "row">
<div class = "col-sm-2"> </div>
<div class = "col-sm-1" > Image goes here</div>
<div class = "col-sm-1" > Image goes here </div>
<div class = "col-sm-8"></div>
</div>
<div class = "row">
<div class = "col-sm-2"> </div>
<div class = "col-sm-1"> <!-- --> </div>
<div class = "col-sm-5">
<div class="row">Title Text goes here </div>
<div class="row"> More text goes here </div>
</div>
<div class = "col-sm-4"></div>
</div> `
my biggest issue comes with defining the size of the images. I would like for them to maintain a certain aspect ratio, and decrease in size (while maintaining the ratio) for smaller displays. I tried fixing the size of the columns and setting the image dimensions to fill the columns, but that doesn't work. also trying to modify the size of the images themselves make them stick out of the grid.
Also is there anyway where i can control the size at which a column wraps?
heres the code for it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid img-responsive"">
<div class="row">
<div class="col-sm-2 col-xs-2" > </div>
<div class="col-sm-1 col-xs-1">
<img src="1.jpg" class="img-responsive" >
</div>
<div class="col-sm-1 col-xs-1">
<img src="2.jpg" class="img-responsive" > </div>
<div class="col-sm-8 col-xs-8"></div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2"> </div>
<div class="col-sm-1 col-xs-1"> <img src="3.jpg " class="img-responsive" ></div>
<div class="col-sm-5 col-xs-5">text goes here </div>
<div class="col-sm-4 col-xs-4" ></div>
</div>
</div>
</html>
<script src="" async defer></script>
</body>
</html>
you just put some images and see
check out the fiddle:https://jsfiddle.net/tyu867tk/
I have a grid layout where I want a menu on the right in desktop mode, but on the top in mobile. This works fine like this:
<div class="row">
<div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div>
<div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div>
</div>
But, I'd like to add other content directly below the menu on the right in desktop mode and have it move below the main content on mobile.
In other words, I'd like it to end up looking like what this would do on mobile:
<div class="row">
<div class="col-xs-12"><div id="menu"></div></div>
<div class="col-xs-12"><div id="main-content"></div></div>
<div class="col-xs-12"><div id="side-content"></div></div>
</div>
Is there any way to make it so I could have two cells on the right in desktop mode, but have one flow above the main content while the other flows below the main content on mobile?
Edit: Here's a picture of what I mean
Go with the link or below code also may be it can help you -
JSFiddle
HTML Code -
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 menuDiv">
<div id="menu">
<h1>menu</h1></div>
</div>
<div class="col-xs-12 col-sm-8">
<div id="main-content">
<h1>main</h1></div>
</div>
<div class="col-xs-12 col-sm-4 sideDiv">
<div id="side-content">
<h1>side</h1></div>
</div>
</div>
</div>
CSS Code -
#menu{
background-color:#60E877;
}
#main-content{
background-color:#E86060;
}
#side-content{
background-color:#685818;
}
#media(min-width:768px){
.menuDiv, .sideDiv{
float:right;
}
}
Try this it will work--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div>
<div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div>
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;">
<div id="side-content"><h1>side</h1></div></div>
</div>
</div>
</body>
</html>
I have two divs that must be centered using the Bootstrap class text-center (for mobile reasons). After applying this class, the image and text center perfectly. However, I'd like the text to be centered AND left-aligned so that it is precisely in line with the left side of the image.
I've tried a couple of things: first centering the div and then creating a div around the text, and left-aligning the text with text-left. However, the text does not stay centered and moves all the way left of the column. I'd like it to only go as left as the image. If I set a margin with pixels so that the text is left-aligned with the image, then it does not stay responsive and jumps all over the page when it is resized.
Here is an example of the content centered, and an example of what happens when I center it and then left-align the text:
https://jsfiddle.net/wgr165tL/3/
I'd like to find out how to get the text centered but left-aligned only as far as the left of the image. It is necessary to keep the text-center class. Any input would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<h1>Example 1 (Original)</h1>
(want text to align with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
</div>
<h1>Example 2</h1>
(Tried centering and then left-aligning text, but it goes too far left. Ideally it will line up with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
</div>
</body>
</html>
Another solution is to set some CSS-properties to your "Test Test" div:
In this case add this div-centered class to that div.
A working example :)
.div-centered {
text-align: left;
margin: auto;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<h1>Example 2</h1>
You rock div-centered class!
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered" >Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered">Test Test</div>
</div>
</div>
Hope it helped :)
Add style="display:inline-block" to line 31, to
<div class="col-sm-3" style="display:inline-block">
You can center the div's by giving equal margins on both sides. Like this:
<div class="row">
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Updated Fiddle. Hope it helps!
Edit:
Just use relevant bootstrap .col-**-** classes.
<div class="row">
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Fiddle.
Use .col-sm-** if you want it to appear inline in tablets too.
try to delete the "text-center" in <div class="row text-center">
hope it help you..