I am trying to center a nested div in bootstrap that's also inside of a wrapper.
Basically it's sticking to the left of my wrapper instead of relatively centering itself.
HTML:
<div class="wrapper center-block">
<P>
The panels below need to be centered so they dont stay left.
They aren't supposed to line up with this paragraph, but be offset so that it looks "fluid"<br />
i.e. stop here<br />
v
</P>
<div class="row">
<div class="col-lg-8 center-block">
<!-- WHY WONT THIS NESTED DIV CENTER!?-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Test panel </strong></h3>
</div>
<div class="panel-body">
test
</div>
</div>
</div>
</div>
<div class="panel-footer col-sm-10 center-block">
<p><small>test footer</small>
</p>
</div>
</div>
<!-- /container -->
CSS:
.wrapper{
max-width:1200px;
float: none;
margin: 0 auto;
}
I was thinking about making another wrapper but this just seems excessive. Is there another way?
With Css, you can use span to put text and it will shrink it. Then you can center it with margin-left:auto; margin-right:auto; Or the div (needs a width) and make the same. If it's the text, then text-align:center;
Hope that helps!
As per Manuel's suggestion I ended up doing this:
Changed:
<div class="col-lg-8 center-block">
To:
<div class="wrapper2 center-block">
Added CSS:
.wrapper2{
max-width:600px;
float: none;
margin: 0 auto;
}
Alternatively:
<div class="center-block" style="max-width:600px;">
Works just the same.
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
How to make my code to use full width of the device? I am using bootstrap.
<section class="special-area bg-white section_padding_100" id="about">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Section Heading Area -->
<div class="section-heading text-center">
<h2>Why Is It Special</h2>
<div class="line-shape"></div>
</div>
</div>
</div>
<div class="row">
<!-- Single Special Area -->
<div class="col-12 col-md-4">
<div class="single-special text-center wow fadeInUp" data-wow-delay="0.2s">
<div class="single-icon">
<i class="ti-mobile" aria-hidden="true"></i>
</div>
<h4>Heading</h4>
<p>Some text here</p>
</div>
</div>
</div>
</section>
you have to use
class="container-fluid"
instead of container class because container class itself has paddings from the right and left...
From the docs:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
Just make sure it is your outermost element.
You can include those parts of your code inside a pre-defined div whose class name is container-fluid. Here are the properties of container-fluid:
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
You can also add a 100% width style to any other container as well, but maybe that can collide with other style rules of your CSS.
Hope it helps.
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
I have a bootstrap div with "row" class, and 2 divs inside acting as columns, A and B.
A contains a span with an icon. B contains a panel which height is variable, even after it loads, the user can add things to it and its height can still grow or become smaller.
I need to vertically center my span, taking the panel's height as reference.
here's my code:
<div class="row">
<div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
<div class="col-lg-9">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
The first part is how it is displayed now, and the second part is how I want it to be displayed. As you can see, the "content" is editable inline, so if the panel grows, the span needs to adjust as well.
thank you very much!
EDIT 1
I must add that I am using IE.
I tried the first suggestion and this is the result:
I ended up using this:
<div class="row">
<div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
<div class="col-lg-10 v-align">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
where:
.v-align {
float: none;
display: inline-block;
vertical-align: middle;
}
Please note, that both columns added, equals 11, instead of 12. There was the key! I don't know why, but if I left it 1 and 11 (resulting in 12 in total) it was displayed as mi edit image.
Thank you!
Yes, You can do it, But you have to remove some bootstrap class and add two of your own class and you can set it easily. Here is the code
.content{
clear:both;
display:block;
}
.a{
display:inlin-block;
vertical-align:middle;
width:20%;
}
.b{
display:inlin-block;
vertical-align:middle;
width:80%;
}
<div class="row">
<div class="col-lg-12">
<div class="content">
<div class="a">
<span class="icon-clipboard icon-agenda-item"></span>
</div>
<div class="b">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
</div>
</div>
I hope This will help you
Regards,
Sarbasish