Known Participant

Answered

Shrink or adjust div "container" of bootstrap template

Forum|Forum|7 years ago
October 1, 2018
3 replies
1963 views

Hello there. I'm working with a nice Bootstrap template and trying to make an adjustment to a middle spot where there are four "meet me" images along with links, etc. Here is the link if you want to actually see the template. I'm making some changes and so far all is looking well. There is one area I'd like to change but am unsure of how to do, and that is adjusting the "Meet Our Team" section. There are 4 images there and I'd like to adjust that to one and center it for the Bootstrap Template.

I've already tried deleting items and adjusting a variety of items and can't seem to make the right movements to accomplish this. I also would like to know why I get the option of "Add new column" when I hover over the picture via DW but it doesn't give me a "remove column" option. That would be AWESOME and easy if it did.

So if there are any ideas on how to make the adjustments without having to greatly disrupting much else I'd be very interested 🙂

This topic has been closed for replies.

Correct answer Nancy OShea

#1 (to Nancy) -> The Bootstrap version is a 3.0 as the .css (and Main Source code) displays this:

<!--

Author: W3layouts

Author URL: http://w3layouts.com

License: Creative Commons Attribution 3.0 Unported

License URL: http://creativecommons.org/licenses/by/3.0/

-->

#2 (to Nancy & Ben) OK I realize now that the <div class> is simply a Bootstrap grid that needs to be adjusted to fit to one image (not 4) and I would be fine keeping one image the same size. And with the current <div class="col-md-3 agile_team_grid"> each of the four images comes along. I've tried adjusting the numbers and nothing was able to work out well (slices images or moves them); that is why I was thinking adjustments may need to be applied to a .css or .js as well...

You're working with some sort of Bootstrap hybrid template because Bootstrap doesn't contain any class called agile_team_grid. I have no idea what that does or if it's necessary for what you want to do.

Do not tamper with Bootstrap CSS or JS files. Always use a separate stylesheet for custom styles and overrides. And place it below Bootstrap CSS.

Given that you're using an older Bootstrap 3.0, all you need is this:

<div class="col-md-3 center-block">

<p class="text-center">YOUR CONTENT HERE</p>

</div>

And add this to your <head> tag:

<style>

.center-block {float:none}

</style>

BenPleysier

Community Expert

Press F12 on your browser to use the developer tools as per

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Bootstrap is a 12-box grid system.

1 x col-12 = 12

2 x col-6 = 12

3 x col-4 = 12

4 x col-3 = 12

and so on....

Or you can combine un-equal width columns to add up to 12.

col-8 + col-4 = 12

col-10 + col-2 = 12

col-3 + col-6 + col-3 = 12

Your link does not show us the code, it's merely an image so I can't give you specifics except to say that you should read the Bootstrap documentation for your version (2, 3, 4.0 or the latest 4.1)

http://getbootstrap.com/docs/4.1/getting-started/introduction/

Nancy O'Shea— Product User & Community Expert

johns45317965Author

Known Participant

Hi Nancy,

Yes, it is the 12-box grid system I would like to make adjustments to; the problem is locating it because it is NOT in the source code. I assume it is located in one of the attached style sheets (.css's or .js's), right? And I tried to identify which one it is too but not 100% sure. Here is a copy of the top of the "team" section along with the first image used in the grid system I showed in my opening question:

<div class="team" id="team">

<div class="container">

<p class="nostrud">I am here help you accomplish.</p>

<div class="agile_team_grids">

<div class="col-md-3 agile_team_grid"> <-- *I think this is the link to the style sheet that needs to be adjusted*-->

<div class="view view-sixth">

<div class="mask">

<h5>quis nostrud</h5>

<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>

</div>

I put in bold the <div class> elements. I assume that I have to find the specific .css or .js attribute and make the adjustments to it in order to make the grid system the size I want(?). What's tough is I have 11 different style sheets so it would take days to find it if I just randomly searched .

Nancy OShea

Correct answer

Community Expert

#1 (to Nancy) -> The Bootstrap version is a 3.0 as the .css (and Main Source code) displays this:

<!--

Author: W3layouts

Author URL: http://w3layouts.com

License: Creative Commons Attribution 3.0 Unported

License URL: http://creativecommons.org/licenses/by/3.0/

-->

#2 (to Nancy & Ben) OK I realize now that the <div class> is simply a Bootstrap grid that needs to be adjusted to fit to one image (not 4) and I would be fine keeping one image the same size. And with the current <div class="col-md-3 agile_team_grid"> each of the four images comes along. I've tried adjusting the numbers and nothing was able to work out well (slices images or moves them); that is why I was thinking adjustments may need to be applied to a .css or .js as well...

You're working with some sort of Bootstrap hybrid template because Bootstrap doesn't contain any class called agile_team_grid. I have no idea what that does or if it's necessary for what you want to do.

Do not tamper with Bootstrap CSS or JS files. Always use a separate stylesheet for custom styles and overrides. And place it below Bootstrap CSS.

Given that you're using an older Bootstrap 3.0, all you need is this:

<div class="col-md-3 center-block">

<p class="text-center">YOUR CONTENT HERE</p>

</div>

And add this to your <head> tag:

<style>

.center-block {float:none}

</style>

Nancy O'Shea— Product User & Community Expert

ALsp

Legend

Bootstrap is free, open source code. Adobe has simply opted to make Bootstrap pages and semi-automated tools, but it is essentially just "included" with Dreamweaver. I guess to make Dreamweaver seem more powerful as a page design application. For what it's worth, my company has been creating actual UI-driven page building tools for Dreamweaver for many, many years. Be that as it may, I'm not trying to make a sale here... but rather trying to explain what Bootstrap is and how it fits (or doesn't) in Dreamweaver.

There are several ardent Bootstrap fans floating around this forum who I'm sure will be able to help you with the manual coding to do what you want.

Stand by for a post from Nancy

But of you do what you do for a living, and have a budget, this is a what a page layout tool should do inside Dreamweaver:

PVIIHarmony Flexbox for Dreamweaver

Since Adobe never created such a tool. We did.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded