Enhance your website with Bootstrap 4 by separating text and images in your carousel

Question

Enhance your website with Bootstrap 4 by separating text and images in your carousel

I've been struggling to create a slider similar to the one shown in the image. I attempted using the Bootstrap carousel, but ran into issues with inconsistent image sizes and the text on the left side jumping around before settling in its correct position.

The long text on the left side was part of the slider and kept moving back and forth until it reached the right placement. The labels 'About Us' and 'Who are we' were specifically excluded from the slider.

Does anyone have suggestions on how to successfully implement such a carousel/slider?

css bootstrap-4 carousel

Answer 1

Answer №1

From what I have gathered, it seems like you wanted the text in your carousel to be on the left side and the photos on the right side. To achieve this layout, I utilized the bootstrap grid system to create two columns - one for the text and one for the slides. The photos are currently not responsive as I added a fixed height to them for testing purposes. Feel free to adjust the height according to your needs.

body,
html {
  height: 100%;
  background: #232c41;
}

.bg {
  background: #3f9aa6;
}

.navbar-brand {
  margin-left: 50px;
}
... (additional CSS code)

<!DOCTYPE html>
<html lang="en">

<head>
  <title>RD - Raining Dreams</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

  <body>
       <!-- top bar -->
    <nav class="navbar navbar-expand-md bg">
      <img class="navbar-brand" src="img/logo.png" alt="">
      ... (additional HTML code)
</script>

</html>

Answer 2

From what I have gathered, it seems like you wanted the text in your carousel to be on the left side and the photos on the right side. To achieve this layout, I utilized the bootstrap grid system to create two columns - one for the text and one for the slides. The photos are currently not responsive as I added a fixed height to them for testing purposes. Feel free to adjust the height according to your needs.

body,
html {
  height: 100%;
  background: #232c41;
}

.bg {
  background: #3f9aa6;
}

.navbar-brand {
  margin-left: 50px;
}
... (additional CSS code)

<!DOCTYPE html>
<html lang="en">

<head>
  <title>RD - Raining Dreams</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

  <body>
       <!-- top bar -->
    <nav class="navbar navbar-expand-md bg">
      <img class="navbar-brand" src="img/logo.png" alt="">
      ... (additional HTML code)
</script>

</html>

Answer 3

Answer №2

After cleaning up the HTML by adding missing closing tags, applying Bootstrap styles, and rearranging some blocks for better organization, I hope this modification aligns more closely with what you had in mind. If there are any specific requirements or adjustments needed, feel free to let me know.

body,
html {
  height: 100%;
  background: #232c41;
}

.bg {
  background: #3f9aa6;
}

.navbar-brand {
  margin-left: 50px;
}

.ml-right {
  margin-right: 50px;
}

.mid_bar {
  background: #39435d;
}

.nav-link {
  color: #e7ffff;
  font-family: "Titillium Web", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: auto;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-link:hover {
  color: #e7ffff;
}

.space {
  margin-left: 20px;
  margin-right: auto;
}

.d-flex {
  justify-content: center;
  align-items: center;
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.rd_bottom_right {
  position: fixed;
  margin-top: 30%;
}

.rd_bottom_left {
  position: relative;
  margin-top: 30%;
}

... (continues with CSS code)

<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
  ... (additional navigation code)
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
  ... (additional navigation code)
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
  ... (slider content)
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" role="button" data-slide="prev">
  ... (carousel control button)
<a class="carousel-control-next rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
  ... (carousel control button)
  <!-- about us -->

</div>
<div class="container-fluid">
  ... (content within the container)
</div>

Answer 4

After cleaning up the HTML by adding missing closing tags, applying Bootstrap styles, and rearranging some blocks for better organization, I hope this modification aligns more closely with what you had in mind. If there are any specific requirements or adjustments needed, feel free to let me know.

body,
html {
  height: 100%;
  background: #232c41;
}

.bg {
  background: #3f9aa6;
}

.navbar-brand {
  margin-left: 50px;
}

.ml-right {
  margin-right: 50px;
}

.mid_bar {
  background: #39435d;
}

.nav-link {
  color: #e7ffff;
  font-family: "Titillium Web", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: auto;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-link:hover {
  color: #e7ffff;
}

.space {
  margin-left: 20px;
  margin-right: auto;
}

.d-flex {
  justify-content: center;
  align-items: center;
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.rd_bottom_right {
  position: fixed;
  margin-top: 30%;
}

.rd_bottom_left {
  position: relative;
  margin-top: 30%;
}

... (continues with CSS code)

<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
  ... (additional navigation code)
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
  ... (additional navigation code)
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
  ... (slider content)
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" role="button" data-slide="prev">
  ... (carousel control button)
<a class="carousel-control-next rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
  ... (carousel control button)
  <!-- about us -->

</div>
<div class="container-fluid">
  ... (content within the container)
</div>

Enhance your website with Bootstrap 4 by separating text and images in your carousel

Answer №1

Answer №2

Similar questions

Utilize jQuery to apply inline styles to dynamically created div elements

Looking for a way to make a button glide down to the bottom of a card in a

Refreshing the page in Next.js causes issues with the CSS classNames

Replicate the cursor to make it show up twice

Display the list items when the page first loads

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

Setting a parent for CSS selectors in Material UI: A step-by-step guide

When the user clicks on the login text field or password field, any existing text will

Using Javascript to generate a button that randomly chooses links within the webpage

Guide on displaying search results in separate boxes using HTML

Difficulty with collapsing icon in Bootstrap's navigation bar

What is the best way to align headings directly above their own bottom border?

What is the best way to align an image with the position of a div?

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

Determine the placement of a <div> based on information stored in localStorage

Showcase a Pair of Files Next to Eachother using HTML

The value entered is displaying as not defined

Color-coding HTML table cells depending on the SQL flag value

Create a CSS popup alert that appears when a button is clicked, rather than using

The user can witness the appearance of a scrollbar when utilizing the